/* ============================================================
   SINOTTICA · Design System — global stylesheet entry point
   ------------------------------------------------------------
   This is the single file consumers link. It is an @import
   manifest ONLY — every token, font-face and base rule lives in
   the files below and ships through this closure.

   Brand: SINOTTICA (by Di Lernia) — optical retail, Trebisacce (CS)
   ============================================================ */

/* ============================================================
   SINOTTICA · Webfonts
   Brand fonts (from the Brand Manual):
     · Aquatico      → display / headings / UI labels
     · Graced Script → script accent (the "Di Lernia" endorsement)
   Companion body face (NOT in the manual — recommended substitution,
   flagged in readme.md): Hanken Grotesk, a clean humanist grotesque
   that pairs with Aquatico's geometric forms and reads well small.
   ============================================================ */

/* @import must precede @font-face. Body companion loaded from Google. */
/* cyrillic-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/HankenGrotesk-400-italic-348e3f14.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/HankenGrotesk-400-italic-cc2ec3eb.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/HankenGrotesk-400-italic-168819af.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/HankenGrotesk-400-italic-668568a2.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/HankenGrotesk-800-normal-19314f14.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/HankenGrotesk-800-normal-aa4a3bbe.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/HankenGrotesk-800-normal-6cc010ea.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/HankenGrotesk-800-normal-c0f3e7d2.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/HankenGrotesk-800-normal-19314f14.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/HankenGrotesk-800-normal-aa4a3bbe.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/HankenGrotesk-800-normal-6cc010ea.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/HankenGrotesk-800-normal-c0f3e7d2.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/HankenGrotesk-800-normal-19314f14.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/HankenGrotesk-800-normal-aa4a3bbe.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/HankenGrotesk-800-normal-6cc010ea.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/HankenGrotesk-800-normal-c0f3e7d2.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/HankenGrotesk-800-normal-19314f14.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/HankenGrotesk-800-normal-aa4a3bbe.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/HankenGrotesk-800-normal-6cc010ea.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/HankenGrotesk-800-normal-c0f3e7d2.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/HankenGrotesk-800-normal-19314f14.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/HankenGrotesk-800-normal-aa4a3bbe.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/HankenGrotesk-800-normal-6cc010ea.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/HankenGrotesk-800-normal-c0f3e7d2.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/fonts/HankenGrotesk-800-normal-19314f14.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/fonts/HankenGrotesk-800-normal-aa4a3bbe.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/fonts/HankenGrotesk-800-normal-6cc010ea.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/fonts/HankenGrotesk-800-normal-c0f3e7d2.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


@font-face {
  font-family: 'Aquatico';
  src: url("/assets/fonts/Aquatico-400-normal-37a02f05.opentype") format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Graced Script';
  src: url("/assets/fonts/GracedScript-400-normal-4238f7eb.truetype") format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   SINOTTICA · Color tokens
   ------------------------------------------------------------
   Brand anchors (Brand Manual + extracted logo artwork):
     · Teal / mint  #8DD1CA   Pantone 3242  — the single brand colour
     · Ink charcoal #2C2E35   the brand "black"
     · Sage gray    #B1BAB9   construction / muted guide grey
     · Mist gray    #E7EAEA   light guide grey
   The brand is mono-chromatic: one teal over cool charcoal + sage
   neutrals. Ramps below are tuned around those anchors. Semantics
   are kept quiet so the teal stays the hero.
   ============================================================ */

:root {
  /* ---- Brand anchors (exact) ---- */
  --brand-teal:      #8DD1CA;   /* Pantone 3242 — primary */
  --brand-teal-art:  #87D9CE;   /* value used in the logo artwork */
  --brand-ink:       #2C2E35;   /* the brand "black" */
  --brand-sage:      #B1BAB9;
  --brand-mist:      #E7EAEA;

  /* ---- Teal ramp (hue ~185) ---- */
  --teal-50:   #F0FAF8;
  --teal-100:  #DCF2EE;
  --teal-200:  #BEE8E1;
  --teal-300:  #A4DDD4;
  --teal-400:  #8DD1CA;   /* brand */
  --teal-500:  #6FBCB3;
  --teal-600:  #4DA298;
  --teal-700:  #2E7C73;   /* accessible teal text / links on white */
  --teal-800:  #235D56;
  --teal-900:  #18423D;

  /* ---- Ink ramp (cool charcoal, hue ~255) ---- */
  --ink-950:   #131419;
  --ink-900:   #1E2025;
  --ink-800:   #2C2E35;   /* brand ink */
  --ink-700:   #3C3F48;
  --ink-600:   #51545F;
  --ink-500:   #6B6F7A;
  --ink-400:   #8A8E98;
  --ink-300:   #ADB1B9;
  --ink-200:   #CDCFD4;
  --ink-100:   #E7E8EB;
  --ink-50:    #F4F5F6;

  /* ---- Stone ramp (cool sage neutrals, anchored on brand greys) ---- */
  --stone-50:  #F7F9F8;
  --stone-100: #EFF2F1;
  --stone-200: #E7EAEA;   /* brand mist */
  --stone-300: #D3D9D8;
  --stone-400: #B1BAB9;   /* brand sage */
  --stone-500: #909A99;
  --stone-600: #6E7877;
  --stone-700: #525B5A;

  --white:     #FFFFFF;
  --black:     #0C0C0C;   /* true black, used sparingly */

  /* ---- Quiet semantics (harmonised to the teal world) ---- */
  --success:        #3E9E77;
  --success-soft:   #E4F3EC;
  --success-ink:    #246048;
  --warning:        #D9A23F;
  --warning-soft:   #F8EFDB;
  --warning-ink:    #7A5611;
  --danger:         #D5564E;
  --danger-soft:    #F8E6E4;
  --danger-ink:     #8A2D27;
  --info:           #4F8DB8;
  --info-soft:      #E5EFF6;
  --info-ink:       #275A7D;

  /* ============================================================
     SEMANTIC ALIASES — reach for these in components
     ============================================================ */

  /* Surfaces */
  --surface-page:     var(--stone-50);    /* app / page background */
  --surface-card:     var(--white);       /* raised cards, sheets */
  --surface-sunken:   var(--stone-100);   /* wells, inputs, tracks */
  --surface-muted:    var(--stone-200);
  --surface-inverse:  var(--ink-800);     /* dark sections, footer */
  --surface-brand:    var(--teal-400);    /* teal fills */
  --surface-brand-soft: var(--teal-50);

  /* Text */
  --text-strong:   var(--ink-800);   /* headings */
  --text-body:     var(--ink-700);   /* default body */
  --text-muted:    var(--ink-500);   /* secondary / captions */
  --text-subtle:   var(--ink-400);   /* placeholder / disabled label */
  --text-on-brand: var(--ink-800);   /* dark text on teal */
  --text-on-dark:  var(--stone-100); /* text on inverse surfaces */
  --text-link:     var(--teal-700);

  /* Borders */
  --border-subtle: var(--stone-200);
  --border-default:var(--stone-300);
  --border-strong: var(--stone-400);
  --border-brand:  var(--teal-400);
  --border-focus:  var(--teal-600);

  /* Accent / interactive */
  --accent:          var(--teal-400);
  --accent-hover:    var(--teal-500);
  --accent-pressed:  var(--teal-600);
  --accent-contrast: var(--ink-800);   /* foreground on accent */

  /* Focus ring */
  --ring: color-mix(in oklab, var(--teal-500) 55%, transparent);
}

/* ============================================================
   SINOTTICA · Typography tokens
   ------------------------------------------------------------
   Display / headings / labels → Aquatico  (geometric, rounded,
     set in UPPERCASE with positive tracking to echo the wordmark)
   Body / UI copy              → Hanken Grotesk (companion)
   Script accent              → Graced Script (sparingly: taglines,
     the "Di Lernia" endorsement, a warm human flourish)
   ============================================================ */

:root {
  /* ---- Families ---- */
  --font-display: 'Aquatico', 'Hanken Grotesk', system-ui, sans-serif;
  --font-body:    'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-script:  'Graced Script', 'Hanken Grotesk', cursive;
  --font-mono:    ui-monospace, 'SFMono-Regular', 'Menlo', 'Consolas', monospace;

  /* ---- Weights ---- */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extra:    800;

  /* ---- Type scale (rem, 16px base) ---- */
  --text-2xs:  0.6875rem;  /* 11 */
  --text-xs:   0.75rem;    /* 12 */
  --text-sm:   0.875rem;   /* 14 */
  --text-base: 1rem;       /* 16 */
  --text-md:   1.125rem;   /* 18 */
  --text-lg:   1.25rem;    /* 20 */
  --text-xl:   1.5rem;     /* 24 */
  --text-2xl:  1.875rem;   /* 30 */
  --text-3xl:  2.375rem;   /* 38 */
  --text-4xl:  3rem;       /* 48 */
  --text-5xl:  3.75rem;    /* 60 */
  --text-6xl:  4.75rem;    /* 76 */
  --text-7xl:  6rem;       /* 96 */

  /* ---- Line heights ---- */
  --leading-none:    1;
  --leading-tight:   1.12;
  --leading-snug:    1.28;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* ---- Letter spacing ----
     Aquatico headings carry air; the wordmark itself is widely tracked. */
  --tracking-tighter: -0.02em;
  --tracking-tight:   -0.01em;
  --tracking-normal:  0em;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.10em;
  --tracking-widest:  0.18em;   /* eyebrows / small caps labels */

  /* ============================================================
     ROLE TOKENS — pair family + size + line-height + tracking
     ============================================================ */
  --font-display-family: var(--font-display);

  /* Display (Aquatico, uppercase, tracked) */
  --display-1-size: var(--text-7xl);
  --display-1-leading: var(--leading-none);
  --display-1-tracking: var(--tracking-wide);

  --display-2-size: var(--text-5xl);
  --display-2-leading: var(--leading-tight);
  --display-2-tracking: var(--tracking-wide);

  /* Headings */
  --h1-size: var(--text-4xl);
  --h2-size: var(--text-3xl);
  --h3-size: var(--text-2xl);
  --h4-size: var(--text-xl);

  /* Eyebrow / overline */
  --eyebrow-size: var(--text-xs);
  --eyebrow-tracking: var(--tracking-widest);

  /* Body */
  --body-lg-size: var(--text-md);
  --body-size:    var(--text-base);
  --body-sm-size: var(--text-sm);
  --caption-size: var(--text-xs);
}

/* ---- Optional helper classes (handy in specimens & static HTML) ---- */
.t-display { font-family: var(--font-display); text-transform: uppercase; letter-spacing: var(--tracking-wide); line-height: var(--leading-tight); color: var(--text-strong); }
.t-eyebrow { font-family: var(--font-display); text-transform: uppercase; letter-spacing: var(--tracking-widest); font-size: var(--eyebrow-size); color: var(--text-muted); }
.t-script  { font-family: var(--font-script); letter-spacing: var(--tracking-normal); }
.t-body    { font-family: var(--font-body); line-height: var(--leading-relaxed); color: var(--text-body); }

/* ============================================================
   SINOTTICA · Spacing & layout tokens
   4px base grid. Generous, calm rhythm — optical-retail clean.
   ============================================================ */

:root {
  --space-0:   0;
  --space-px:  1px;
  --space-0-5: 0.125rem;  /* 2  */
  --space-1:   0.25rem;   /* 4  */
  --space-1-5: 0.375rem;  /* 6  */
  --space-2:   0.5rem;    /* 8  */
  --space-2-5: 0.625rem;  /* 10 */
  --space-3:   0.75rem;   /* 12 */
  --space-4:   1rem;      /* 16 */
  --space-5:   1.25rem;   /* 20 */
  --space-6:   1.5rem;    /* 24 */
  --space-7:   1.75rem;   /* 28 */
  --space-8:   2rem;      /* 32 */
  --space-10:  2.5rem;    /* 40 */
  --space-12:  3rem;      /* 48 */
  --space-14:  3.5rem;    /* 56 */
  --space-16:  4rem;      /* 64 */
  --space-20:  5rem;      /* 80 */
  --space-24:  6rem;      /* 96 */
  --space-32:  8rem;      /* 128 */
  --space-40:  10rem;     /* 160 */

  /* Layout */
  --container-sm:  640px;
  --container-md:  820px;
  --container-lg:  1080px;
  --container-xl:  1280px;
  --container-2xl: 1440px;

  --gutter:        var(--space-6);
  --section-y:     var(--space-24);   /* vertical section padding */
  --section-y-sm:  var(--space-16);
}

/* ============================================================
   SINOTTICA · Radius tokens
   The mark is built from fully-rounded bars; the brand language
   is soft and pill-like. Controls round generously.
   ============================================================ */

:root {
  --radius-none: 0;
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   22px;
  --radius-2xl:  32px;
  --radius-pill: 999px;
  --radius-full: 50%;

  /* Component defaults */
  --radius-button: var(--radius-pill);
  --radius-input:  var(--radius-md);
  --radius-card:   var(--radius-xl);
  --radius-chip:   var(--radius-pill);
}

/* ============================================================
   SINOTTICA · Elevation (shadows) & focus
   Shadows are soft and cool-tinted (ink hue), low alpha — the
   brand feels airy, never heavy. Used sparingly: cards lift just
   enough to separate from the stone page.
   ============================================================ */

:root {
  /* Cool ink-tinted shadow base: rgb of --ink-800 (#2C2E35) */
  --shadow-color: 44 46 53;

  --shadow-xs:
    0 1px 2px rgb(var(--shadow-color) / 0.06);
  --shadow-sm:
    0 1px 2px rgb(var(--shadow-color) / 0.05),
    0 2px 6px rgb(var(--shadow-color) / 0.06);
  --shadow-md:
    0 2px 4px rgb(var(--shadow-color) / 0.05),
    0 6px 16px rgb(var(--shadow-color) / 0.08);
  --shadow-lg:
    0 4px 8px rgb(var(--shadow-color) / 0.05),
    0 14px 32px rgb(var(--shadow-color) / 0.10);
  --shadow-xl:
    0 8px 16px rgb(var(--shadow-color) / 0.06),
    0 28px 60px rgb(var(--shadow-color) / 0.14);

  /* Teal-tinted glow for interactive emphasis (use rarely) */
  --shadow-brand:
    0 8px 24px rgb(109 188 179 / 0.35);

  /* Inset for sunken wells / pressed */
  --shadow-inset: inset 0 1px 2px rgb(var(--shadow-color) / 0.08);

  /* Focus ring (pair with --ring colour from colors.css) */
  --focus-ring: 0 0 0 3px var(--ring);
  --focus-ring-offset: 0 0 0 2px var(--surface-card), 0 0 0 5px var(--ring);
}

/* ============================================================
   SINOTTICA · Motion tokens
   Calm and precise. Gentle ease-outs and fades; no bounces, no
   springy overshoot. Interactions feel considered, like a clean
   optician's bench. Respect prefers-reduced-motion downstream.
   ============================================================ */

:root {
  /* Durations */
  --dur-instant: 80ms;   /* @kind other */
  --dur-fast:    140ms;  /* @kind other */
  --dur-base:    220ms;  /* @kind other */
  --dur-slow:    340ms;  /* @kind other */
  --dur-slower:  520ms;  /* @kind other */

  /* Easings */
  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);   /* @kind other */ /* soft settle */
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);   /* @kind other */
  --ease-in:      cubic-bezier(0.4, 0, 1, 1);       /* @kind other */
  --ease-emphasis:cubic-bezier(0.2, 0.7, 0.2, 1);   /* @kind other */ /* gentle */

  /* Common transitions */
  --transition-colors: color var(--dur-fast) var(--ease-out),
                       background-color var(--dur-fast) var(--ease-out),
                       border-color var(--dur-fast) var(--ease-out),
                       box-shadow var(--dur-fast) var(--ease-out);
  --transition-transform: transform var(--dur-base) var(--ease-out);
  --transition-base: all var(--dur-base) var(--ease-out);
}

/* ============================================================
   SINOTTICA · Base / reset
   Minimal, opinionated reset that wires the brand defaults onto
   bare HTML so any consuming page starts on-brand.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  font-size: var(--body-size);
  line-height: var(--leading-relaxed);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Headings default to the display face, uppercase + tracked like the wordmark */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text-strong);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-weight: var(--weight-regular);
}
h1 { font-size: var(--h1-size); }
h2 { font-size: var(--h2-size); }
h3 { font-size: var(--h3-size); }
h4 { font-size: var(--h4-size); letter-spacing: var(--tracking-normal); }

h5, h6 {
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  color: var(--text-strong);
  line-height: var(--leading-snug);
}

p { text-wrap: pretty; }

a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

img, svg, video { display: block; max-width: 100%; }

button, input, select, textarea { font: inherit; color: inherit; }

::selection { background: var(--teal-200); color: var(--ink-800); }

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

hr { border: none; border-top: 1px solid var(--border-subtle); }

/* Shared keyframes */
@keyframes sin-spin { to { transform: rotate(360deg); } }
@keyframes sin-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes sin-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes sin-pop { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* Component layer (classes used by the React components & static cards) */
/* ============================================================
   SINOTTICA · Buttons
   .sin-btn  +  --primary | --secondary | --outline | --ghost | --danger
             +  --sm | --md | --lg   +  --block   +  --icon (square)
   ============================================================ */

.sin-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  height: 44px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: var(--radius-button);
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-size: 0.9375rem;
  font-weight: var(--weight-regular);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  transition: var(--transition-colors), transform var(--dur-fast) var(--ease-out);
}
.sin-btn:active { transform: translateY(1px); }
.sin-btn:disabled,
.sin-btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.5;
  transform: none;
}
.sin-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Sizes */
.sin-btn--sm { height: 36px; padding: 0 16px; font-size: 0.8125rem; }
.sin-btn--lg { height: 54px; padding: 0 30px; font-size: 1.0625rem; }

.sin-btn--block { display: flex; width: 100%; }

/* Icon-only (square) — width tracks the size's height */
.sin-btn--icon { width: 44px; padding: 0; }
.sin-btn--icon.sin-btn--sm { width: 36px; }
.sin-btn--icon.sin-btn--lg { width: 54px; }

/* Variants */
.sin-btn--primary {
  background: var(--accent);
  color: var(--accent-contrast);
}
.sin-btn--primary:hover:not(:disabled) { background: var(--accent-hover); }
.sin-btn--primary:active:not(:disabled) { background: var(--accent-pressed); }

.sin-btn--secondary {
  background: var(--ink-800);
  color: var(--white);
}
.sin-btn--secondary:hover:not(:disabled) { background: var(--ink-700); }
.sin-btn--secondary:active:not(:disabled) { background: var(--ink-900); }

.sin-btn--outline {
  background: transparent;
  border-color: var(--border-default);
  color: var(--text-strong);
}
.sin-btn--outline:hover:not(:disabled) { background: var(--stone-50); border-color: var(--ink-400); }
.sin-btn--outline:active:not(:disabled) { background: var(--stone-100); }

.sin-btn--ghost {
  background: transparent;
  color: var(--text-body);
}
.sin-btn--ghost:hover:not(:disabled) { background: var(--teal-50); color: var(--teal-700); }
.sin-btn--ghost:active:not(:disabled) { background: var(--teal-100); }

.sin-btn--danger {
  background: var(--danger);
  color: var(--white);
}
.sin-btn--danger:hover:not(:disabled) { background: var(--danger-ink); }

/* On dark surfaces */
.sin-on-dark .sin-btn--outline { border-color: var(--ink-600); color: var(--stone-100); }
.sin-on-dark .sin-btn--outline:hover:not(:disabled) { background: rgba(255,255,255,0.06); border-color: var(--stone-400); }
.sin-on-dark .sin-btn--ghost { color: var(--stone-200); }
.sin-on-dark .sin-btn--ghost:hover:not(:disabled) { background: rgba(255,255,255,0.08); color: #fff; }

/* Loading spinner */
.sin-btn__spinner {
  width: 1em; height: 1em;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: sin-spin 0.7s linear infinite;
}
.sin-btn--loading { color: transparent !important; position: relative; }
.sin-btn--loading .sin-btn__spinner {
  position: absolute; top: 50%; left: 50%; margin: -0.5em 0 0 -0.5em;
  color: var(--accent-contrast);
}
.sin-btn--secondary.sin-btn--loading .sin-btn__spinner,
.sin-btn--danger.sin-btn--loading .sin-btn__spinner { color: #fff; }
.sin-btn--outline.sin-btn--loading .sin-btn__spinner,
.sin-btn--ghost.sin-btn--loading .sin-btn__spinner { color: var(--text-strong); }

/* ============================================================
   SINOTTICA · Forms
   Field shell (.sin-field) + input / select / textarea / choice
   controls. Calm, rounded, generous tap targets (≥44px).
   ============================================================ */

.sin-field { display: flex; flex-direction: column; gap: 6px; }
.sin-field__label {
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  color: var(--text-strong);
  display: inline-flex; align-items: center; gap: 6px;
}
.sin-field__label .sin-req { color: var(--danger); }
.sin-field__hint { font-size: var(--text-xs); color: var(--text-muted); }
.sin-field__error { font-size: var(--text-xs); color: var(--danger-ink); display: inline-flex; align-items: center; gap: 5px; }

/* Text input / textarea / select share the control look */
.sin-input,
.sin-textarea,
.sin-select {
  width: 100%;
  min-height: 44px;
  padding: 11px 14px;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-input);
  color: var(--text-strong);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.4;
  transition: var(--transition-colors);
  appearance: none;
}
.sin-input::placeholder,
.sin-textarea::placeholder { color: var(--text-subtle); }
.sin-input:hover,
.sin-textarea:hover,
.sin-select:hover { border-color: var(--border-strong); }
.sin-input:focus,
.sin-textarea:focus,
.sin-select:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: var(--focus-ring);
}
.sin-input:disabled,
.sin-textarea:disabled,
.sin-select:disabled {
  background: var(--stone-100);
  color: var(--text-subtle);
  cursor: not-allowed;
}
.sin-textarea { min-height: 104px; resize: vertical; }

.sin-input--error,
.sin-textarea--error,
.sin-select--error { border-color: var(--danger); }
.sin-input--error:focus { box-shadow: 0 0 0 3px var(--danger-soft); }

/* Input with leading/trailing icon */
.sin-input-wrap { position: relative; display: flex; align-items: center; }
.sin-input-wrap .sin-input { padding-left: 42px; }
.sin-input-wrap--trailing .sin-input { padding-left: 14px; padding-right: 42px; }
.sin-input-wrap__icon {
  position: absolute; left: 14px; display: flex; color: var(--text-muted); pointer-events: none;
}
.sin-input-wrap--trailing .sin-input-wrap__icon { left: auto; right: 14px; }

/* Select chevron */
.sin-select-wrap { position: relative; }
.sin-select-wrap::after {
  content: ""; position: absolute; right: 16px; top: 50%; width: 9px; height: 9px;
  border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted);
  transform: translateY(-65%) rotate(45deg); pointer-events: none;
}
.sin-select { padding-right: 38px; cursor: pointer; }

/* Checkbox & radio */
.sin-choice { display: inline-flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: var(--text-base); color: var(--text-body); }
.sin-choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.sin-choice__box {
  flex: none; width: 22px; height: 22px; margin-top: 1px;
  border: 1.5px solid var(--border-strong); background: var(--surface-card);
  display: grid; place-items: center; color: transparent;
  transition: var(--transition-colors);
}
.sin-choice--checkbox .sin-choice__box { border-radius: 7px; }
.sin-choice--radio .sin-choice__box { border-radius: 50%; }
.sin-choice:hover .sin-choice__box { border-color: var(--teal-500); }
.sin-choice input:checked + .sin-choice__box {
  background: var(--accent); border-color: var(--accent); color: var(--ink-800);
}
.sin-choice--radio input:checked + .sin-choice__box { background: var(--surface-card); border-color: var(--accent); }
.sin-choice--radio input:checked + .sin-choice__box::after {
  content: ""; width: 11px; height: 11px; border-radius: 50%; background: var(--accent);
}
.sin-choice input:focus-visible + .sin-choice__box { box-shadow: var(--focus-ring); }
.sin-choice input:disabled ~ * { opacity: 0.5; }
.sin-choice__box svg { width: 15px; height: 15px; }

/* Switch */
.sin-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.sin-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.sin-switch__track {
  width: 44px; height: 26px; border-radius: 999px; background: var(--stone-300);
  padding: 3px; transition: background-color var(--dur-base) var(--ease-out);
}
.sin-switch__thumb {
  width: 20px; height: 20px; border-radius: 50%; background: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-out);
}
.sin-switch input:checked + .sin-switch__track { background: var(--accent); }
.sin-switch input:checked + .sin-switch__track .sin-switch__thumb { transform: translateX(18px); }
.sin-switch input:focus-visible + .sin-switch__track { box-shadow: var(--focus-ring); }
.sin-switch input:disabled + .sin-switch__track { opacity: 0.5; }

/* ============================================================
   SINOTTICA · Data display
   Card · Avatar · Badge · Tag/Chip · Rating · Stat
   ============================================================ */

/* ---- Card ---- */
.sin-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.sin-card--flat { box-shadow: none; }
.sin-card--raised { box-shadow: var(--shadow-md); border-color: transparent; }
.sin-card--interactive { cursor: pointer; transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.sin-card--interactive:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); border-color: transparent; }
.sin-card__media { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--stone-100); }
.sin-card__body { padding: var(--space-5); }
.sin-card__footer { padding: var(--space-4) var(--space-5); border-top: 1px solid var(--border-subtle); display: flex; align-items: center; gap: var(--space-3); }

/* ---- Avatar ---- */
.sin-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--teal-100);
  color: var(--teal-800);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.03em;
  font-size: 17px;
  overflow: hidden; flex: none; user-select: none;
}
.sin-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sin-avatar--xs { width: 28px; height: 28px; font-size: 11px; }
.sin-avatar--sm { width: 36px; height: 36px; font-size: 14px; }
.sin-avatar--lg { width: 60px; height: 60px; font-size: 23px; }
.sin-avatar--xl { width: 88px; height: 88px; font-size: 33px; }
.sin-avatar--ink { background: var(--ink-800); color: var(--teal-300); }
.sin-avatar-group { display: inline-flex; }
.sin-avatar-group .sin-avatar { border: 2px solid var(--surface-card); margin-left: -12px; }
.sin-avatar-group .sin-avatar:first-child { margin-left: 0; }

/* ---- Badge ---- */
.sin-badge {
  display: inline-flex; align-items: center; gap: 5px;
  height: 22px; padding: 0 9px;
  border-radius: var(--radius-sm);
  font-family: var(--font-body); font-weight: var(--weight-semibold);
  font-size: var(--text-xs); line-height: 1; white-space: nowrap;
}
.sin-badge svg { width: 13px; height: 13px; }
.sin-badge--neutral { background: var(--stone-200); color: var(--ink-700); }
.sin-badge--brand   { background: var(--teal-100); color: var(--teal-800); }
.sin-badge--solid   { background: var(--accent); color: var(--ink-800); }
.sin-badge--success { background: var(--success-soft); color: var(--success-ink); }
.sin-badge--warning { background: var(--warning-soft); color: var(--warning-ink); }
.sin-badge--danger  { background: var(--danger-soft); color: var(--danger-ink); }
.sin-badge--info    { background: var(--info-soft); color: var(--info-ink); }
.sin-badge--outline { background: transparent; box-shadow: inset 0 0 0 1px var(--border-default); color: var(--text-body); }

/* ---- Tag / Chip ---- */
.sin-chip {
  display: inline-flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 14px;
  border-radius: var(--radius-pill);
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  color: var(--text-body); font-size: var(--text-sm); font-weight: var(--weight-medium);
  cursor: pointer; transition: var(--transition-colors);
  white-space: nowrap;
}
.sin-chip svg { width: 15px; height: 15px; color: var(--text-muted); }
.sin-chip:hover { border-color: var(--teal-500); color: var(--teal-700); }
.sin-chip:hover svg { color: var(--teal-600); }
.sin-chip--selected { background: var(--teal-400); border-color: var(--teal-400); color: var(--ink-800); }
.sin-chip--selected svg { color: var(--ink-700); }
.sin-chip--static { cursor: default; }
.sin-chip__remove { display: inline-flex; margin-right: -4px; border-radius: 50%; }
.sin-chip__remove:hover { color: var(--danger); }

/* ---- Rating (stars) ---- */
.sin-rating { display: inline-flex; align-items: center; gap: 2px; color: var(--teal-500); }
.sin-rating--gold { color: #E0A23C; }
.sin-rating__star { width: 18px; height: 18px; }
.sin-rating__count { margin-left: 7px; font-size: var(--text-sm); color: var(--text-muted); font-family: var(--font-body); }

/* ---- Stat ---- */
.sin-stat { display: flex; flex-direction: column; gap: 2px; }
.sin-stat__value { font-family: var(--font-display); font-size: var(--text-3xl); color: var(--text-strong); line-height: 1; letter-spacing: var(--tracking-tight); }
.sin-stat__label { font-family: var(--font-display); text-transform: uppercase; letter-spacing: var(--tracking-widest); font-size: var(--text-2xs); color: var(--text-muted); }

/* ============================================================
   SINOTTICA · Feedback
   Alert / banner · Tooltip
   ============================================================ */

/* ---- Alert ---- */
.sin-alert {
  display: flex; gap: var(--space-3);
  padding: var(--space-4) var(--space-4);
  border-radius: var(--radius-lg);
  border: 1px solid transparent;
  font-size: var(--text-sm); line-height: 1.5;
}
.sin-alert__icon { flex: none; margin-top: 1px; }
.sin-alert__body { flex: 1; }
.sin-alert__title { font-weight: var(--weight-bold); color: var(--text-strong); margin-bottom: 2px; }
.sin-alert__close { flex: none; color: var(--text-muted); cursor: pointer; background: none; border: none; padding: 2px; border-radius: var(--radius-xs); }
.sin-alert__close:hover { color: var(--text-strong); }

.sin-alert--info    { background: var(--info-soft); border-color: color-mix(in oklab, var(--info) 30%, transparent); }
.sin-alert--info    .sin-alert__icon { color: var(--info-ink); }
.sin-alert--success { background: var(--success-soft); border-color: color-mix(in oklab, var(--success) 30%, transparent); }
.sin-alert--success .sin-alert__icon { color: var(--success-ink); }
.sin-alert--warning { background: var(--warning-soft); border-color: color-mix(in oklab, var(--warning) 35%, transparent); }
.sin-alert--warning .sin-alert__icon { color: var(--warning-ink); }
.sin-alert--danger  { background: var(--danger-soft); border-color: color-mix(in oklab, var(--danger) 30%, transparent); }
.sin-alert--danger  .sin-alert__icon { color: var(--danger-ink); }
.sin-alert--brand   { background: var(--teal-50); border-color: var(--teal-200); }
.sin-alert--brand   .sin-alert__icon { color: var(--teal-700); }

/* ---- Tooltip ---- */
.sin-tooltip { position: relative; display: inline-flex; }
.sin-tooltip__bubble {
  position: absolute; bottom: calc(100% + 9px); left: 50%; transform: translateX(-50%);
  background: var(--ink-800); color: var(--stone-100);
  font-size: var(--text-xs); font-weight: var(--weight-medium);
  padding: 7px 11px; border-radius: var(--radius-sm);
  white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  box-shadow: var(--shadow-md); z-index: 40;
}
.sin-tooltip__bubble::after {
  content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--ink-800);
}
.sin-tooltip:hover .sin-tooltip__bubble,
.sin-tooltip:focus-within .sin-tooltip__bubble { opacity: 1; }

/* ============================================================
   SINOTTICA · Navigation
   Tabs · Accordion
   ============================================================ */

/* ---- Tabs ---- */
.sin-tabs { display: inline-flex; gap: 4px; padding: 4px; background: var(--surface-sunken); border-radius: var(--radius-pill); }
.sin-tab {
  appearance: none; border: none; background: transparent; cursor: pointer;
  height: 38px; padding: 0 18px; border-radius: var(--radius-pill);
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: var(--tracking-wide);
  font-size: var(--text-sm); color: var(--text-muted);
  display: inline-flex; align-items: center; gap: 7px;
  transition: var(--transition-colors);
}
.sin-tab:hover { color: var(--text-strong); }
.sin-tab--active { background: var(--surface-card); color: var(--text-strong); box-shadow: var(--shadow-sm); }
.sin-tab:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Underline tab variant */
.sin-tabs--underline { display: flex; gap: 0; padding: 0; background: transparent; border-bottom: 1px solid var(--border-subtle); border-radius: 0; }
.sin-tabs--underline .sin-tab { border-radius: 0; height: 46px; box-shadow: none; background: transparent; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.sin-tabs--underline .sin-tab--active { color: var(--teal-700); border-bottom-color: var(--teal-500); background: transparent; }

/* ---- Accordion ---- */
.sin-accordion { border-top: 1px solid var(--border-subtle); }
.sin-acc-item { border-bottom: 1px solid var(--border-subtle); }
.sin-acc-header {
  width: 100%; appearance: none; background: none; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-5) var(--space-1);
  text-align: left;
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: var(--tracking-wide);
  font-size: var(--text-md); color: var(--text-strong);
  transition: var(--transition-colors);
}
.sin-acc-header:hover { color: var(--teal-700); }
.sin-acc-header:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
.sin-acc-chevron { flex: none; color: var(--text-muted); transition: transform var(--dur-base) var(--ease-out); }
.sin-acc-item--open .sin-acc-chevron { transform: rotate(180deg); color: var(--teal-600); }
.sin-acc-panel { overflow: hidden; }
.sin-acc-panel__inner { padding: 0 var(--space-1) var(--space-5); color: var(--text-body); font-size: var(--text-base); line-height: var(--leading-relaxed); max-width: 64ch; }