/*
 * Shoplix Design Tokens
 * Single source of truth for color, type, spacing, radii, shadows.
 * Load this file first on every Shoplix surface.
 */

/* ============================================================
   FONT LOADING
   ============================================================
   All four families are Google Fonts. Marked as substitution
   defaults — replace with licensed fonts if/when available.
   ------------------------------------------------------------ */
@import url("https://fonts.googleapis.com/css2?family=Instrument+Serif:ital,wght@0,400;1,400&family=Geist:wght@300;400;500;600;700&family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap");

:root {
  /* ============================================================
     COLOR — RAW PALETTE
     ============================================================ */

  /* Ink (the only "black") */
  --ink:           #1A1A1A;
  --ink-90:        rgba(26, 26, 26, 0.90);
  --ink-70:        rgba(26, 26, 26, 0.70);
  --ink-55:        rgba(26, 26, 26, 0.55);
  --ink-40:        rgba(26, 26, 26, 0.40);
  --ink-20:        rgba(26, 26, 26, 0.20);
  --ink-12:        rgba(26, 26, 26, 0.12);
  --ink-08:        rgba(26, 26, 26, 0.08);
  --ink-04:        rgba(26, 26, 26, 0.04);

  /* Paper (warm cream — default page bg) */
  --paper:         #F5F1E8;
  --paper-warm:    #EEE7D6;   /* slightly deeper paper for sections */
  --paper-bright:  #FBF8F0;   /* near-paper for inset surfaces */

  /* Pure white — used only inside cards on Paper */
  --white:         #FFFFFF;

  /* Sand neutrals — surfaces, dividers, fills */
  --sand-50:       #F1EAD8;
  --sand-100:      #E8DDC8;
  --sand-200:      #DBCBAE;
  --sand-300:      #C9B48C;
  --sand-400:      #B0976A;
  --sand-500:      #8C6A3C;
  --sand-600:      #5C4326;

  /* Honey — primary brand (warm gold-yellow) */
  --honey:         #E8B83A;
  --honey-hover:   #D4A52E;
  --honey-press:   #BD9224;
  --honey-tint:    #FBEFC9;   /* soft fill for badges */
  --honey-deep:    #8B5A2B;   /* burnt umber — on-honey accents, deep text */

  /* Mint — secondary accent / live / synced */
  --mint:          #2F6F5A;
  --mint-tint:     #D9E8DF;
  --mint-deep:     #143830;

  /* Ruby — destructive */
  --ruby:          #B2331F;
  --ruby-tint:     #F4D7CF;

  /* Amber — warning */
  --amber:         #C68A14;
  --amber-tint:    #F5E2BA;

  /* Hairline (used everywhere as default border) */
  --hairline:      rgba(26, 26, 26, 0.12);
  --hairline-soft: rgba(26, 26, 26, 0.06);
  --hairline-bold: rgba(26, 26, 26, 0.24);

  /* ============================================================
     COLOR — SEMANTIC ALIASES
     ============================================================
     Always prefer these in components. Raw palette stays internal.
     ------------------------------------------------------------ */

  /* Backgrounds */
  --bg:            var(--paper);
  --bg-warm:       var(--paper-warm);
  --bg-elevated:   var(--white);
  --bg-inset:      var(--sand-50);
  --bg-inverse:    var(--ink);

  /* Foreground (text & icons) */
  --fg-1:          var(--ink);            /* primary text */
  --fg-2:          var(--ink-70);         /* secondary text */
  --fg-3:          var(--ink-55);         /* tertiary / placeholder */
  --fg-4:          var(--ink-40);         /* disabled / decorative */
  --fg-inverse:    var(--paper);
  --fg-on-honey:   var(--ink);            /* honey is light gold — dark text for contrast */
  --fg-link:       var(--ink);            /* links use underline, not color */

  /* Brand */
  --brand:         var(--honey);
  --brand-hover:   var(--honey-hover);
  --brand-press:   var(--honey-press);
  --brand-tint:    var(--honey-tint);

  /* Status (used by pills, badges, toasts) */
  --success:       var(--mint);
  --success-tint:  var(--mint-tint);
  --warning:       var(--amber);
  --warning-tint:  var(--amber-tint);
  --danger:        var(--ruby);
  --danger-tint:   var(--ruby-tint);
  --info:          var(--ink);            /* info uses neutral, not blue */
  --info-tint:     var(--sand-50);

  /* Borders */
  --border:        var(--hairline);
  --border-soft:   var(--hairline-soft);
  --border-bold:   var(--hairline-bold);
  --border-focus:  var(--honey);

  /* ============================================================
     TYPOGRAPHY — FAMILIES
     ============================================================ */
  --font-display:  "Instrument Serif", "GT Sectra", "Söhne Breit", Georgia, serif;
  --font-ui:       "Geist", "Söhne", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-arabic:   "IBM Plex Sans Arabic", "Geist", system-ui, sans-serif;
  --font-mono:     "JetBrains Mono", "SF Mono", Menlo, monospace;

  /* ============================================================
     TYPOGRAPHY — SCALE (font-size / line-height)
     ============================================================
     Bias toward an editorial scale: display goes large,
     body stays disciplined.
     ------------------------------------------------------------ */
  --t-display-xl:   96px;     /* hero — Instrument Serif italic */
  --t-display-lg:   72px;
  --t-display-md:   56px;
  --t-display-sm:   40px;

  --t-heading-xl:   32px;     /* Geist, page titles */
  --t-heading-lg:   24px;
  --t-heading-md:   20px;
  --t-heading-sm:   16px;

  --t-body-lg:      17px;     /* long-form reading */
  --t-body:         15px;     /* default body, UI */
  --t-body-sm:      13px;     /* secondary UI */
  --t-caption:      12px;     /* labels, eyebrows, captions */
  --t-micro:        11px;     /* table headers, tags */

  /* line heights */
  --lh-tight:      1.05;
  --lh-snug:       1.20;
  --lh-normal:     1.45;
  --lh-loose:      1.65;

  /* letter spacing */
  --ls-tight:      -0.02em;
  --ls-normal:     0;
  --ls-eyebrow:    0.08em;    /* ALL-CAPS eyebrow labels */

  /* font weights */
  --fw-light:      300;
  --fw-regular:    400;
  --fw-medium:     500;
  --fw-semibold:   600;
  --fw-bold:       700;

  /* ============================================================
     SPACING (4px base unit)
     ============================================================ */
  --s-0:    0;
  --s-1:    4px;
  --s-2:    8px;
  --s-3:    12px;
  --s-4:    16px;
  --s-5:    24px;
  --s-6:    32px;
  --s-7:    48px;
  --s-8:    64px;
  --s-9:    96px;
  --s-10:  128px;

  /* ============================================================
     RADII
     ============================================================ */
  --radius-0:    0px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 999px;

  /* ============================================================
     SHADOWS
     ============================================================ */
  --shadow-none:   none;
  --shadow-card:   0 1px 0 rgba(26, 26, 26,0.04), 0 8px 24px -12px rgba(26, 26, 26,0.10);
  --shadow-pop:    0 8px 32px -8px rgba(26, 26, 26,0.20);
  --shadow-modal:  0 24px 64px -16px rgba(26, 26, 26,0.28);

  /* ============================================================
     MOTION
     ============================================================ */
  --ease:          cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-press:     100ms;
  --dur-hover:     180ms;
  --dur-enter:     320ms;
  --dur-page:      520ms;

  /* ============================================================
     LAYOUT
     ============================================================ */
  --max-content:   1240px;
  --nav-width:     240px;
  --topbar-h:      64px;
  --mobile-tabbar-h: 84px;
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   ============================================================
   Use these by name. They map to the scale above.
   ------------------------------------------------------------ */

.t-display-xl {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-regular);
  font-size: var(--t-display-xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
}
.t-display-lg { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: var(--t-display-lg); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); color: var(--fg-1); }
.t-display-md { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: var(--t-display-md); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); color: var(--fg-1); }
.t-display-sm { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: var(--t-display-sm); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); color: var(--fg-1); }

.t-h1 { font-family: var(--font-ui); font-weight: var(--fw-semibold); font-size: var(--t-heading-xl); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); color: var(--fg-1); }
.t-h2 { font-family: var(--font-ui); font-weight: var(--fw-semibold); font-size: var(--t-heading-lg); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); color: var(--fg-1); }
.t-h3 { font-family: var(--font-ui); font-weight: var(--fw-medium);   font-size: var(--t-heading-md); line-height: var(--lh-snug); color: var(--fg-1); }
.t-h4 { font-family: var(--font-ui); font-weight: var(--fw-medium);   font-size: var(--t-heading-sm); line-height: var(--lh-snug); color: var(--fg-1); }

.t-body-lg { font-family: var(--font-ui); font-weight: 400; font-size: var(--t-body-lg); line-height: var(--lh-loose); color: var(--fg-1); }
.t-body    { font-family: var(--font-ui); font-weight: 400; font-size: var(--t-body);    line-height: var(--lh-normal); color: var(--fg-1); }
.t-body-sm { font-family: var(--font-ui); font-weight: 400; font-size: var(--t-body-sm); line-height: var(--lh-normal); color: var(--fg-2); }

.t-caption {
  font-family: var(--font-ui);
  font-weight: var(--fw-medium);
  font-size: var(--t-caption);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}

.t-eyebrow {
  font-family: var(--font-ui);
  font-weight: var(--fw-medium);
  font-size: var(--t-micro);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--fg-2);
}

.t-mono {
  font-family: var(--font-mono);
  font-size: var(--t-body-sm);
  line-height: var(--lh-normal);
  color: var(--fg-1);
}

/* ============================================================
   PAPER BACKGROUND — drop this class on <body> to get
   the canonical Shoplix surface with subtle grain.
   ============================================================ */
.paper-surface {
  background-color: var(--paper);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 0.08 0 0 0 0 0.07 0 0 0 0 0.05 0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.35'/></svg>");
  color: var(--fg-1);
}

/* ============================================================
   RTL — applied via dir="rtl" on the root.
   Arabic surfaces should also set font-family on the root.
   ============================================================ */
[dir="rtl"] {
  font-family: var(--font-arabic);
}

/* ============================================================
   FOCUS — global keyboard ring.
   ============================================================ */
:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
  border-radius: 2px;
}