{
  "$description": "SKAP design tokens. Source of truth for prototype/assets/css/tokens.css (tools/build_tokens.py) and the future Tailwind theme. Brand colors come from the owner's Figma (realtimecolors: 0A190B, F2FAF3, 51B75C, 47DD56, 5DB7D7); text-safe shades are derived so every text pair passes WCAG AA.",
  "color": {
    "ink": {
      "value": "#0A190B",
      "note": "Figma text. 17.1:1 on paper."
    },
    "ink-2": {
      "value": "#3F5243",
      "note": "Secondary text. 7.9:1 on paper."
    },
    "ink-3": {
      "value": "#56695A",
      "note": "Tertiary text, placeholders. 5.5:1 on paper."
    },
    "paper": {
      "value": "#F2FAF3",
      "note": "Figma background. Page ground."
    },
    "surface": {
      "value": "#FFFFFF",
      "note": "Cards, inputs, menus."
    },
    "surface-2": {
      "value": "#DCE7DE",
      "note": "Sunk panels, app footer (Figma footer tone)."
    },
    "tile": {
      "value": "#E6F1E8",
      "note": "Garment tiles behind cut-outs."
    },
    "tile-2": {
      "value": "#EDF5EE",
      "note": "Hovered or alternate tile."
    },
    "line": {
      "value": "#D3E2D6",
      "note": "Hairline dividers (decorative)."
    },
    "line-control": {
      "value": "#7E9883",
      "note": "Input and checkbox borders. 3.1:1 on white."
    },
    "green": {
      "value": "#51B75C",
      "note": "Figma primary. Button fills with ink text (7.2:1)."
    },
    "green-hover": {
      "value": "#47A852",
      "note": "Hover fill, ink text 6.0:1."
    },
    "green-press": {
      "value": "#3F994A",
      "note": "Pressed fill."
    },
    "green-ink": {
      "value": "#2A7034",
      "note": "Green text, links, focus ring. 5.7:1 on paper."
    },
    "green-tint": {
      "value": "#DCF3DE",
      "note": "Selected and success backgrounds."
    },
    "green-bright": {
      "value": "#47DD56",
      "note": "Figma secondary. Selection glow only, never text."
    },
    "sky": {
      "value": "#5DB7D7",
      "note": "Figma accent. Semantic only: Plus badge, planned marker, info. Ink text 8.0:1."
    },
    "sky-ink": {
      "value": "#1C6580",
      "note": "Sky text on light grounds. 6.1:1 on paper."
    },
    "sky-tint": {
      "value": "#DDF0F7",
      "note": "Planned day, info backgrounds."
    },
    "danger": {
      "value": "#B23A2B",
      "note": "Errors, destructive actions. 5.6:1 on paper."
    },
    "danger-tint": {
      "value": "#FBE9E5"
    },
    "warn": {
      "value": "#8A5B00",
      "note": "Soft-cap and payment warnings. 5.5:1 on paper."
    },
    "warn-tint": {
      "value": "#FFF2D1"
    },
    "overlay": {
      "value": "rgb(10 25 11 / .42)",
      "note": "Dialog backdrop."
    }
  },
  "font": {
    "sans": {
      "value": "\"Schibsted Grotesk\", \"Helvetica Neue\", Arial, system-ui, sans-serif",
      "note": "Schibsted Grotesk: the grotesk of the Norwegian media group behind VG and Aftenposten. Familiar Norwegian everyday voice, variable 400-900, Latin-1 covers æ ø å."
    },
    "display": {
      "value": "\"Brygada 1918\", Georgia, \"Times New Roman\", serif",
      "note": "Display serif for h1/h2 and big statements: moderate contrast, so verticals in H, N, M stay readable (Bodoni Moda was too thin). Text, UI and small headings stay in the sans."
    }
  },
  "font-weight": {
    "regular": {
      "value": "400"
    },
    "medium": {
      "value": "500"
    },
    "semibold": {
      "value": "600"
    },
    "display": {
      "value": "600",
      "note": "Weight of the h1/h2 serif."
    },
    "bold": {
      "value": "700"
    },
    "black": {
      "value": "820"
    }
  },
  "font-size": {
    "xs": {
      "value": "0.75rem",
      "note": "12px"
    },
    "sm": {
      "value": "0.875rem",
      "note": "14px"
    },
    "md": {
      "value": "1rem",
      "note": "16px, body"
    },
    "lg": {
      "value": "1.125rem",
      "note": "18px"
    },
    "xl": {
      "value": "clamp(1.25rem, 1.1rem + 0.5vw, 1.4375rem)",
      "note": "20-23px, fluid"
    },
    "2xl": {
      "value": "clamp(1.5rem, 1.2rem + 1vw, 1.875rem)",
      "note": "24-30px, app page titles, fluid"
    },
    "3xl": {
      "value": "clamp(1.875rem, 1.35rem + 1.7vw, 2.625rem)",
      "note": "30-42px, fluid"
    },
    "display-2": {
      "value": "clamp(2rem, 1.1rem + 3vw, 3.5rem)",
      "note": "Landing section headings"
    },
    "display": {
      "value": "clamp(2.75rem, 1.15rem + 5.6vw, 5.75rem)",
      "note": "Landing hero, max 92px"
    }
  },
  "line-height": {
    "tight": {
      "value": "1.04"
    },
    "snug": {
      "value": "1.2"
    },
    "normal": {
      "value": "1.5"
    }
  },
  "letter-spacing": {
    "display": {
      "value": "-0.035em"
    },
    "heading": {
      "value": "-0.018em"
    },
    "display-serif": {
      "value": "-0.01em",
      "note": "Tracking for the serif headings."
    },
    "wordmark": {
      "value": "0.42em"
    },
    "badge": {
      "value": "0.08em"
    }
  },
  "space": {
    "1": {
      "value": "4px"
    },
    "2": {
      "value": "8px"
    },
    "3": {
      "value": "12px"
    },
    "4": {
      "value": "16px"
    },
    "5": {
      "value": "20px"
    },
    "6": {
      "value": "24px"
    },
    "7": {
      "value": "32px"
    },
    "8": {
      "value": "40px"
    },
    "9": {
      "value": "48px"
    },
    "10": {
      "value": "64px"
    },
    "11": {
      "value": "80px"
    },
    "12": {
      "value": "96px"
    },
    "13": {
      "value": "128px"
    }
  },
  "radius": {
    "xs": {
      "value": "6px"
    },
    "sm": {
      "value": "10px"
    },
    "md": {
      "value": "14px"
    },
    "lg": {
      "value": "20px"
    },
    "xl": {
      "value": "28px"
    },
    "pill": {
      "value": "999px",
      "note": "Inputs and buttons are pills, as in the Figma components."
    }
  },
  "shadow": {
    "sm": {
      "value": "0 1px 2px rgb(10 25 11 / .06), 0 1px 1px rgb(10 25 11 / .04)"
    },
    "md": {
      "value": "0 2px 4px rgb(10 25 11 / .05), 0 10px 24px rgb(10 25 11 / .08)"
    },
    "lg": {
      "value": "0 8px 16px rgb(10 25 11 / .06), 0 28px 56px rgb(10 25 11 / .14)"
    },
    "garment": {
      "value": "drop-shadow(0 10px 12px rgb(10 25 11 / .16)) drop-shadow(0 2px 3px rgb(10 25 11 / .12))",
      "note": "CSS filter for cut-out garments."
    },
    "garment-lift": {
      "value": "drop-shadow(0 18px 18px rgb(10 25 11 / .2)) drop-shadow(0 4px 5px rgb(10 25 11 / .12))"
    },
    "selected": {
      "value": "0 0 0 2px #47DD56, 0 10px 28px -6px rgb(71 221 86 / .55)",
      "note": "Selection glow (reference: glow seam between cards)."
    },
    "focus": {
      "value": "0 0 0 3px rgb(81 183 92 / .4)"
    }
  },
  "duration": {
    "fast": {
      "value": "120ms"
    },
    "base": {
      "value": "200ms"
    },
    "slow": {
      "value": "320ms"
    },
    "story": {
      "value": "700ms",
      "note": "Landing collage assembly only."
    }
  },
  "easing": {
    "out": {
      "value": "cubic-bezier(.16, 1, .3, 1)"
    },
    "in-out": {
      "value": "cubic-bezier(.65, 0, .35, 1)"
    }
  },
  "z": {
    "header": {
      "value": "50"
    },
    "menu": {
      "value": "60"
    },
    "sheet": {
      "value": "70"
    },
    "dialog": {
      "value": "80"
    },
    "toast": {
      "value": "90"
    }
  },
  "layout": {
    "container": {
      "value": "1360px",
      "note": "Max width; below it the layout is fluid."
    },
    "container-app": {
      "value": "1056px",
      "note": "App pages (Figma «Pages»): header 1128 = content + 2 x header-overhang."
    },
    "header-overhang": {
      "value": "36px",
      "note": "How far the floating app header reaches past the content on each side."
    },
    "gutter": {
      "value": "clamp(16px, 1rem + 2.2vw, 48px)",
      "note": "Fluid side gutter: 16px on phones, 48px on wide screens."
    },
    "gutter-mobile": {
      "value": "16px"
    },
    "section-gap": {
      "value": "clamp(48px, 2rem + 4.5vw, 112px)",
      "note": "Space between page sections, fluid."
    },
    "footer-gap": {
      "value": "clamp(48px, 1.5rem + 3vw, 72px)",
      "note": "Figma Footer: gap above the footer bar."
    },
    "footer-height": {
      "value": "64px",
      "note": "Footer bar height; half the inner air of the Figma bar (100px), which felt too roomy."
    },
    "footer-pad-x": {
      "value": "36px",
      "note": "Footer bar side padding; half of Figma's 71px."
    },
    "section-gap-app": {
      "value": "24px",
      "note": "Between sections inside app pages (Figma main page: 24)."
    },
    "shelf-gap": {
      "value": "clamp(16px, 2vw, 36px)",
      "note": "Between cards on shelves (Figma: 37 at 1920)."
    },
    "page-top": {
      "value": "clamp(24px, 1rem + 2vw, 48px)",
      "note": "Space under the app header, fluid."
    },
    "card-min": {
      "value": "clamp(140px, 8rem + 4vw, 210px)",
      "note": "Minimum item card width in auto-fill grids."
    },
    "header-height": {
      "value": "64px"
    },
    "tabbar-height": {
      "value": "68px"
    }
  }
}