/* ============================================================
   Appto Design System — Colors & Type
   Source of truth for all brand tokens. Mirror to theme.json.
   ============================================================ */

/* Brand font — Inter variable (uploaded). Local copy in /fonts.
   Has both opsz (14–32) and wght (100–900) axes; large headlines should
   request a higher opsz so the display optical cut kicks in. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/Inter-VariableFont_opsz_wght.ttf') format('truetype-variations');
}

:root {
  /* ----------  COLOR — RAW SLUGS  ----------
     These map 1:1 to theme.json palette slugs.
     Always reference by var; never hex inline. */

  /* Base */
  --color-base-bg:            #F8F9FB;
  --color-base-surface:       #FFFFFF;
  --color-text-primary:       #1E1E1E;
  --color-text-secondary:     #6B7280;

  /* Brand */
  --color-brand-primary:        #2563EB;
  --color-brand-primary-hover:  #1D4ED8;
  --color-cta:                  #F97316;

  /* Category accents */
  --color-cat-tech:           #00AEEF;
  --color-cat-apparel:        #6B7280;
  --color-cat-beauty-fem:     #E879F9;
  --color-cat-beauty-masc:    #0F4C5C;
  --color-cat-personal-care:  #34D399;

  /* Surface / status */
  --color-border:   #E5E7EB;
  --color-success:  #22C55E;
  --color-error:    #EF4444;
  --color-warning:  #F59E0B;

  /* ----------  SEMANTIC ALIASES  ---------- */
  --bg:           var(--color-base-bg);
  --surface:      var(--color-base-surface);
  --surface-2:    #F1F3F7;          /* subtle hover/strip — derived, not a slug */
  --fg:           var(--color-text-primary);
  --fg-muted:     var(--color-text-secondary);
  --fg-subtle:    #9CA3AF;          /* derived from neutral ramp */
  --accent:       var(--color-brand-primary);
  --accent-hover: var(--color-brand-primary-hover);
  --cta:          var(--color-cta);
  --cta-hover:    #EA580C;          /* derived */
  --border:       var(--color-border);
  --border-strong:#D1D5DB;          /* derived */

  /* On-color (text that sits on filled accents) */
  --on-accent:    #FFFFFF;
  --on-cta:       #FFFFFF;
  --on-dark:      #FFFFFF;

  /* ----------  TYPOGRAPHY  ----------
     Single typeface — Inter variable — used for both display and body.
     Display sizes opt into the larger optical cut via font-variation-settings
     "opsz" (see .display class + h1 baseline below). */
  --font-display: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-sans:    'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, 'Cascadia Mono', monospace;

  /* Type scale — pixel sizes for direct use in mocks */
  --fs-display-xl: 72px;   --lh-display-xl: 1.02;   --tr-display-xl: -0.03em;
  --fs-display-lg: 56px;   --lh-display-lg: 1.04;   --tr-display-lg: -0.025em;
  --fs-display-md: 44px;   --lh-display-md: 1.08;   --tr-display-md: -0.02em;
  --fs-h1:         36px;   --lh-h1:         1.12;   --tr-h1:         -0.02em;
  --fs-h2:         28px;   --lh-h2:         1.18;   --tr-h2:         -0.015em;
  --fs-h3:         22px;   --lh-h3:         1.25;   --tr-h3:         -0.01em;
  --fs-h4:         18px;   --lh-h4:         1.35;   --tr-h4:          0;
  --fs-body-lg:    18px;   --lh-body-lg:    1.55;
  --fs-body:       16px;   --lh-body:       1.55;
  --fs-body-sm:    14px;   --lh-body-sm:    1.50;
  --fs-caption:    12px;   --lh-caption:    1.40;   --tr-caption:    0.02em;
  --fs-eyebrow:    12px;   --lh-eyebrow:    1.30;   --tr-eyebrow:    0.12em;

  /* Weights */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extrabold:800;

  /* ----------  SPACING  ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;

  /* ----------  RADII  ---------- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;   /* default for cards, inputs, buttons */
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* ----------  ELEVATION (very restrained)  ---------- */
  --shadow-xs:   0 1px 0 rgba(17, 24, 39, 0.04);
  --shadow-sm:   0 1px 2px rgba(17, 24, 39, 0.06), 0 1px 1px rgba(17, 24, 39, 0.04);
  --shadow-md:   0 4px 12px rgba(17, 24, 39, 0.06), 0 2px 4px rgba(17, 24, 39, 0.04);
  --shadow-lg:   0 12px 28px rgba(17, 24, 39, 0.10), 0 4px 8px rgba(17, 24, 39, 0.04);
  --shadow-focus: 0 0 0 3px rgba(37, 99, 235, 0.22);

  /* ----------  MOTION  ---------- */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   320ms;

  /* ----------  LAYOUT  ---------- */
  --container-max: 1280px;
  --container-pad: 24px;
}

/* ============================================================
   SEMANTIC ELEMENT BASELINES
   ============================================================ */

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg);
  background: var(--bg);
  font-weight: var(--fw-regular);
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  color: var(--fg);
  margin: 0;
  /* Inter optical-size axis — push to display cut for h1/h2; smaller for h3/h4 */
  font-variation-settings: "opsz" 28;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--tr-h1); font-variation-settings: "opsz" 32; }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--tr-h2); font-variation-settings: "opsz" 28; }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--tr-h3); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); letter-spacing: var(--tr-h4); font-weight: var(--fw-bold); font-variation-settings: "opsz" 18; }

/* Hero / display sizes — push optical size all the way up */
.display, .display-xl, .display-lg, .display-md {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-variation-settings: "opsz" 32;
  letter-spacing: -0.025em;
  line-height: 1.04;
  margin: 0;
}

p { margin: 0 0 var(--space-4); }
small, .caption { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--fg-muted); }
.eyebrow {
  font-size: var(--fs-eyebrow); line-height: var(--lh-eyebrow);
  letter-spacing: var(--tr-eyebrow); text-transform: uppercase;
  font-weight: var(--fw-semibold); color: var(--fg-muted);
}
code, kbd, pre, samp { font-family: var(--font-mono); font-size: 0.92em; }

a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 3px; }

::selection { background: rgba(37, 99, 235, 0.18); color: var(--fg); }

*:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-sm);
}