/* ==========================================================================
   HALLMARK — Global Men's Jewelry MVP
   Design presentation tokens
   Mirrors system_design/design-system/tokens/tokens.css
   ========================================================================== */

:root {
  /* ---- Neutral ramp — warm cast, hue ~35-45deg ---- */
  --n-0:    #FFFFFF;
  --n-25:   #FAF9F7;   /* Bone */
  --n-50:   #F5F3F0;
  --n-100:  #EDEAE5;
  --n-200:  #DFDBD4;
  --n-300:  #C7C2B9;
  --n-400:  #A29C92;
  --n-450:  #8E887E;
  --n-500:  #767068;
  --n-600:  #5E5952;
  --n-700:  #45413B;
  --n-800:  #302D29;
  --n-850:  #1F1D1B;
  --n-900:  #1D1B19;   /* Onyx */
  --n-925:  #171614;
  --n-950:  #121110;
  --n-1000: #0F0E0D;   /* Ink */

  /* ---- Gold — the vibrant primary accent (was patina brass) ---- */
  --gold-100: #FBF2DE;
  --gold-300: #F0DCA8;
  --gold-400: #E3BC63;   /* dark-theme text — 10.69:1 on Ink */
  --gold-500: #C9962E;   /* THE brand gold — fills, marks, 7.25:1 on Ink */
  --gold-600: #A87A1E;   /* borders + large text on light — 3.65:1 */
  --gold-700: #8A6317;   /* light-theme text — 5.15:1 on Bone */

  /* ---- Emerald — trust, delivery, confirmation ---- */
  --em-100: #DFF0E7;
  --em-400: #3FBF8C;     /* dark-theme text — 8.31:1 on Ink */
  --em-500: #0E7C57;     /* light-theme text — 4.94:1 on Bone */
  --em-700: #0A5C40;

  /* aliases kept so existing rules keep working */
  --brass-300: var(--gold-300);
  --brass-400: var(--gold-400);
  --brass-500: var(--gold-500);
  --brass-600: var(--gold-600);
  --brass-700: var(--gold-700);

  /* ---- Semantic — light ---- */
  --bg:            var(--n-25);
  --bg-inverse:    var(--n-1000);
  --surface:       var(--n-25);
  --surface-raised:var(--n-0);
  --surface-sunken:var(--n-100);
  --surface-subtle:var(--n-50);
  --surface-inverse:var(--n-900);
  --scrim:         rgba(18,17,16,.56);

  --text:      var(--n-900);
  --text-2:    var(--n-600);
  --text-3:    var(--n-500);
  --text-dis:  var(--n-400);
  --text-inv:  var(--n-25);
  --text-acc:  var(--brass-700);

  --line-subtle: var(--n-100);
  --line:        var(--n-200);
  --line-strong: var(--n-450);
  --line-focus:  var(--n-900);
  --line-acc:    var(--brass-600);

  --accent:     var(--gold-500);
  --accent-txt: var(--gold-700);
  --accent-bg:  var(--gold-100);
  --trust:      var(--em-500);
  --trust-bg:   var(--em-100);

  --ok:   #0E7C57;  --ok-bg:   #DFF0E7;
  --warn: #8A5A12;  --warn-bg: #F5EDDF;
  --err:  #A33A2E;  --err-bg:  #F6E7E4;
  --info: #2F4F6E;  --info-bg: #E6EBF0;

  --el-1: 0 1px 2px rgba(18,17,16,.05), 0 8px 24px -14px rgba(18,17,16,.12);
  --el-2: 0 2px 4px rgba(18,17,16,.06), 0 16px 40px -18px rgba(18,17,16,.16);
  --el-3: 0 24px 64px -28px rgba(18,17,16,.26);

  /* ---- Type ---- */
  --f-primary:   "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-editorial: "Instrument Serif", Georgia, serif;
  --f-mono:      "IBM Plex Mono", Consolas, monospace;

  /* ---- Space ---- */
  --s1:2px;  --s2:4px;   --s3:8px;   --s4:12px;  --s5:16px;  --s6:20px;
  --s7:24px; --s8:32px;  --s9:40px;  --s10:48px; --s11:64px; --s12:80px;
  --s13:96px;--s14:120px;--s15:160px;--s16:200px;

  /* ---- Shape ---- */
  --r-none:0px; --r-xs:2px; --r-sm:4px; --r-full:9999px;

  /* ---- Motion ---- */
  --d-instant:80ms; --d-fast:140ms; --d-std:220ms; --d-emph:320ms; --d-delib:480ms;
  --e-std: cubic-bezier(.2,0,0,1);
  --e-in:  cubic-bezier(.16,1,.3,1);
  --e-out: cubic-bezier(.4,0,1,1);

  color-scheme: light dark;
}

[data-theme="dark"] {
  --bg:            var(--n-1000);
  --bg-inverse:    var(--n-25);
  --surface:       var(--n-925);
  --surface-raised:var(--n-850);
  --surface-sunken:#0A0908;
  --surface-subtle:#1A1917;
  --surface-inverse:var(--n-50);
  --scrim:         rgba(6,6,5,.68);

  --text:     #F2EFEA;
  --text-2:   #B8B2A8;
  --text-3:   var(--n-450);
  --text-dis: var(--n-600);
  --text-inv: var(--n-900);
  --text-acc: var(--brass-400);

  --line-subtle: #232120;
  --line:        #2A2825;
  --line-strong: #6B655C;
  --line-focus:  #F2EFEA;
  --line-acc:    var(--brass-400);

  --accent:     var(--gold-500);
  --accent-txt: var(--gold-400);
  --accent-bg:  #2B2110;
  --trust:      var(--em-400);
  --trust-bg:   #0D2620;

  --ok:   #3FBF8C;  --ok-bg:   #0D2620;
  --warn: #D9A85A;  --warn-bg: #2A2010;
  --err:  #E08D80;  --err-bg:  #2B1614;
  --info: #8FB0CC;  --info-bg: #131D26;

  --el-1: none; --el-2: none; --el-3: none;
}

/* ==========================================================================
   Base
   ========================================================================== */

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--f-primary);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background var(--d-std) var(--e-std), color var(--d-std) var(--e-std);
}

:focus-visible { outline: 2px solid var(--line-focus); outline-offset: 2px; }

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

/* ==========================================================================
   Type styles
   ========================================================================== */

.t-display-xl { font-family: var(--f-editorial); font-weight: 400; font-size: clamp(56px,7.2vw,128px); line-height:.92; letter-spacing:-.03em; }
.t-display-l  { font-family: var(--f-editorial); font-weight: 400; font-size: clamp(40px,5vw,88px);    line-height:.96; letter-spacing:-.025em; }
.t-display-m  { font-family: var(--f-editorial); font-weight: 400; font-size: clamp(32px,3.6vw,56px);  line-height:1.02; letter-spacing:-.02em; }

.t-h1 { font-weight:500; font-size:clamp(32px,3.2vw,48px); line-height:1.08; letter-spacing:-.02em; }
.t-h2 { font-weight:500; font-size:clamp(26px,2.4vw,36px); line-height:1.14; letter-spacing:-.015em; }
.t-h3 { font-weight:500; font-size:24px; line-height:1.2;  letter-spacing:-.01em; }
.t-h4 { font-weight:500; font-size:20px; line-height:1.3;  letter-spacing:-.005em; }
.t-h5 { font-weight:600; font-size:17px; line-height:1.4; }

.t-body-l { font-weight:400; font-size:19px; line-height:1.6; }
.t-body   { font-weight:400; font-size:17px; line-height:1.6; }
.t-body-s { font-weight:400; font-size:15px; line-height:1.55; }
.t-cap    { font-weight:400; font-size:13px; line-height:1.45; }

.t-label { font-weight:600; font-size:12px; line-height:1.2; letter-spacing:.12em; text-transform:uppercase; }
.t-nav   { font-weight:500; font-size:13px; line-height:1;   letter-spacing:.08em; text-transform:uppercase; }
.t-btn   { font-weight:600; font-size:13px; line-height:1;   letter-spacing:.09em; text-transform:uppercase; }
.t-meta  { font-family:var(--f-mono); font-weight:400; font-size:12px; line-height:1.4; letter-spacing:.02em; }
.t-price { font-weight:500; letter-spacing:.01em; font-variant-numeric: tabular-nums lining-nums; }

.tone-2 { color: var(--text-2); }
.tone-3 { color: var(--text-3); }
.tone-acc { color: var(--text-acc); }

/* ==========================================================================
   Presentation chrome
   ========================================================================== */

.page { max-width: 1560px; margin: 0 auto; padding: 0 var(--s9) var(--s15); }

.deck-head { padding: var(--s14) 0 var(--s10); max-width: 62ch; }
.deck-head .eyebrow { display:inline-flex; align-items:center; gap:var(--s3); color:var(--text-3); }
.deck-head .eyebrow::before { content:""; width:18px; height:1px; background:var(--line-acc); }
.deck-head h1 { margin: var(--s5) 0 var(--s5); }
.deck-head p { color: var(--text-2); margin:0; }

.rule { height:1px; background: var(--line); border:0; margin:0; }

.sect { padding-top: var(--s13); }
.sect-head { display:flex; align-items:baseline; justify-content:space-between; gap:var(--s7);
             padding-bottom:var(--s5); border-bottom:1px solid var(--line); margin-bottom:var(--s9); }
.sect-head .n { font-family:var(--f-mono); font-size:12px; letter-spacing:.02em; color:var(--text-acc); }

/* ---- Top bar ---- */
.topbar { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between;
          gap:var(--s7); padding:var(--s5) var(--s9); background:color-mix(in srgb, var(--bg) 88%, transparent);
          backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
.topbar .home { display:inline-flex; align-items:center; gap:var(--s3); text-decoration:none; color:var(--text); }
.topbar nav { display:flex; gap:var(--s7); }
.topbar nav a { text-decoration:none; color:var(--text-2); padding-bottom:2px; border-bottom:2px solid transparent; }
.topbar nav a:hover { color: var(--text); border-bottom-color: var(--line); }
.topbar nav a[aria-current] { color: var(--text); border-bottom-color: var(--brass-500); }

/* ---- Wordmark ---- */
.wordmark { font-weight:600; font-size:15px; letter-spacing:.28em; text-transform:uppercase; }
.wordmark .dia { color: var(--brass-500); }

/* ---- Theme toggle ---- */
.tgl { display:inline-flex; border:1px solid var(--line-strong); border-radius:var(--r-xs); overflow:hidden; }
.tgl button { appearance:none; border:0; background:transparent; color:var(--text-2); cursor:pointer;
              font-family:var(--f-primary); font-weight:600; font-size:11px; letter-spacing:.1em;
              text-transform:uppercase; padding:7px 12px; transition: all var(--d-fast) var(--e-std); }
.tgl button[aria-pressed="true"] { background: var(--text); color: var(--text-inv); }

/* ---- Screen slot ---- */
.slot-cap { margin-bottom: var(--s5); }
.slot-cap .n { font-family:var(--f-mono); font-size:12px; color:var(--text-acc); letter-spacing:.02em; }
.slot-cap b { display:block; font-weight:500; font-size:20px; letter-spacing:-.005em; margin-top:var(--s2); }
.slot-cap span { display:block; color:var(--text-3); font-size:13px; line-height:1.45; margin-top:var(--s2); max-width:46ch; }

/* ---- Annotation ---- */
.note { display:flex; gap:var(--s3); align-items:flex-start; color:var(--text-3); font-size:13px; line-height:1.5; }
.note::before { content:""; flex:none; width:12px; height:1px; background:var(--line-acc); margin-top:10px; }

/* ---- Browser frame ---- */
.browser { border:1px solid var(--line); background:var(--surface-raised); box-shadow:var(--el-2); border-radius:var(--r-sm); overflow:hidden; }
[data-theme="dark"] .browser { border-color: var(--line); }
.browser .chrome { display:flex; align-items:center; gap:var(--s4); padding:10px var(--s4);
                   background:var(--surface-sunken); border-bottom:1px solid var(--line); }
.browser .dots { display:flex; gap:6px; }
.browser .dots i { width:9px; height:9px; border-radius:var(--r-full); background:var(--n-300); display:block; }
[data-theme="dark"] .browser .dots i { background: var(--n-700); }
.browser .url { flex:1; font-family:var(--f-mono); font-size:11px; color:var(--text-3);
                background:var(--surface-raised); border:1px solid var(--line); border-radius:var(--r-xs);
                padding:4px 10px; text-align:center; }
.browser .vp { background:var(--bg); overflow:hidden; }

/* ---- Phone frame ---- */
.phone { width:340px; border-radius:46px; padding:10px; flex:none;
         background:linear-gradient(165deg,#2b2926,#131211 62%);
         box-shadow:var(--el-3), inset 0 1px 1px rgba(255,255,255,.12); }
.phone .scr { position:relative; border-radius:37px; overflow:hidden; background:var(--bg);
              height:712px; display:flex; flex-direction:column; }
.phone .island { position:absolute; top:10px; inset-inline:0; margin-inline:auto; width:96px; height:24px;
                 border-radius:20px; background:#0b0a0a; z-index:30; }
.phone .sbar { display:flex; justify-content:space-between; align-items:center; padding:15px 26px 4px;
               font-family:var(--f-mono); font-size:11px; color:var(--text); }
.phone .pbody { flex:1; overflow:hidden; display:flex; flex-direction:column; }
.phone .hbar { height:4px; width:104px; border-radius:4px; background:var(--line-strong); margin:6px auto 8px; opacity:.5; }

/* ---- Generic UI atoms used inside mockups ---- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:var(--s3);
       font-family:var(--f-primary); font-weight:600; font-size:13px; letter-spacing:.09em;
       text-transform:uppercase; border-radius:var(--r-xs); border:0; cursor:pointer;
       padding:0 var(--s7); height:44px; text-decoration:none;
       transition: all var(--d-fast) var(--e-std); }
.btn-primary  { background:var(--text); color:var(--text-inv); }
.btn-primary:hover { opacity:.88; }
.btn-secondary{ background:transparent; color:var(--text); border:1px solid var(--line-strong); }
.btn-secondary:hover { background: var(--surface-subtle); }
.btn-ghost    { background:transparent; color:var(--text); padding:0 var(--s5); }
.btn-ghost:hover { background: var(--surface-subtle); }
.btn-sm { height:36px; font-size:12px; padding:0 var(--s5); }
.btn-lg { height:52px; padding:0 var(--s8); }
.btn-block { width:100%; }

.chip { display:inline-flex; align-items:center; gap:var(--s2); height:32px; padding:0 var(--s4);
        border:1px solid var(--line-strong); border-radius:var(--r-xs); background:transparent;
        color:var(--text); font-size:14px; cursor:pointer; transition:all var(--d-fast) var(--e-std); }
.chip:hover { background: var(--surface-subtle); }
.chip.on { background:var(--text); color:var(--text-inv); border-color:var(--text); }

.tag { display:inline-flex; align-items:center; height:24px; padding:0 var(--s3);
       border:1px solid var(--line); border-radius:var(--r-xs); font-size:13px; color:var(--text-2); }
.tag.mono { font-family:var(--f-mono); font-size:11px; letter-spacing:.04em; text-transform:uppercase; }

.badge { display:inline-flex; align-items:center; gap:6px; height:20px; padding:0 var(--s3);
         border-radius:var(--r-xs); font-weight:600; font-size:11px; letter-spacing:.1em; text-transform:uppercase; }
.badge i { width:6px; height:6px; border-radius:var(--r-full); background:currentColor; flex:none; }
.badge.ok   { background:var(--ok-bg);   color:var(--ok); }
.badge.warn { background:var(--warn-bg); color:var(--warn); }
.badge.err  { background:var(--err-bg);  color:var(--err); }
.badge.info { background:var(--info-bg); color:var(--info); }
.badge.neu  { background:var(--surface-sunken); color:var(--text-2); }

.inp { display:flex; align-items:center; gap:var(--s3); height:44px; padding:0 var(--s4);
       border:1px solid var(--line-strong); border-radius:var(--r-xs); background:transparent;
       color:var(--text-dis); font-size:15px; }
.inp .val { color: var(--text); }

.fieldlabel { font-weight:600; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-3); }

/* ---- Icon defaults: 1.5px stroke, butt caps, miter joins ---- */
.ic { width:24px; height:24px; flex:none; stroke:currentColor; stroke-width:1.5;
      stroke-linecap:butt; stroke-linejoin:miter; fill:none; }
.ic-16 { width:16px; height:16px; stroke-width:1.25; }
.ic-20 { width:20px; height:20px; }
.ic-32 { width:32px; height:32px; stroke-width:1.75; }

/* ---- Jewelry technical illustration placeholder ---- */
.jw-media { position:relative; background:var(--surface-sunken); overflow:hidden;
            display:grid; place-items:center; }
.jw-media svg { width:62%; height:62%; stroke:var(--n-450); stroke-width:1.5; fill:none;
                stroke-linecap:butt; stroke-linejoin:miter; }
[data-theme="dark"] .jw-media svg { stroke: var(--n-600); }
.jw-media.dark { background: var(--n-900); }
.jw-media.dark svg { stroke: var(--n-600); }
.ar-45 { aspect-ratio: 4/5; }
.ar-11 { aspect-ratio: 1/1; }
.ar-32 { aspect-ratio: 3/2; }
.ar-169{ aspect-ratio: 16/9; }
.ar-219{ aspect-ratio: 21/9; }

/* ---- Scroll niceties ---- */
.noscroll { scrollbar-width:none; -ms-overflow-style:none; }
.noscroll::-webkit-scrollbar { display:none; }

@media (max-width: 900px) {
  .page { padding: 0 var(--s6) var(--s12); }
  .topbar { padding: var(--s4) var(--s6); }
  .topbar nav { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ==========================================================================
   v0.4 — vibrant accent utilities + landing-page components
   ========================================================================== */

/* ---- Gold button: the vibrant CTA ---- */
.btn-gold { background: var(--gold-500); color: #1D1B19; }
.btn-gold:hover { background: var(--gold-400); }
.btn-outline-gold { background: transparent; color: var(--gold-500); border: 1px solid var(--gold-500); }
.btn-onimage { background: rgba(250,249,247,.10); color: #FAF9F7; border: 1px solid rgba(250,249,247,.42);
               backdrop-filter: blur(6px); }

/* ---- Accent rules & marks ---- */
.acc-rule { width: 40px; height: 2px; background: var(--gold-500); display: block; }
.acc-dot  { width: 6px; height: 6px; background: var(--gold-500); display: inline-block; }
.quote-mark { font-family: var(--f-editorial); font-size: 64px; line-height: .6; color: var(--gold-500); }

/* ---- Trust chips (COD / delivery) ---- */
.trust { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px;
         background: var(--trust-bg); color: var(--trust); border-radius: var(--r-xs);
         font-weight: 600; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.trust svg { stroke: currentColor; }

/* ---- Category tile ---- */
.cattile { position: relative; display: block; text-decoration: none; color: inherit; overflow: hidden;
           background: var(--n-900); }
.cattile .fig { display: grid; place-items: center; }
.cattile .fig svg { stroke: var(--gold-500); stroke-width: 1.5; fill: none;
                    stroke-linecap: butt; stroke-linejoin: miter; }
.cattile .cap { position: absolute; inset-inline: 0; bottom: 0; padding: 24px;
                background: linear-gradient(to top, rgba(15,14,13,.92), transparent); color: #FAF9F7; }

/* ---- Portrait placeholder ---- */
.portrait { position: relative; display: grid; place-items: end center; overflow: hidden;
            background: var(--n-950); }
.portrait svg { width: 100%; height: 100%; }
.portrait .tagph { position: absolute; top: 16px; inset-inline-start: 16px;
                   font-family: var(--f-mono); font-size: 10px; letter-spacing: .12em;
                   text-transform: uppercase; color: rgba(250,249,247,.5);
                   border: 1px solid rgba(250,249,247,.24); padding: 4px 8px; }

/* ---- Statistic bits (mobile app) ---- */
.sparkbar { display: flex; align-items: flex-end; gap: 4px; height: 72px; }
.sparkbar i { flex: 1; display: block; background: var(--surface-sunken); }
.sparkbar i.on { background: var(--gold-500); }
.donut { transform: rotate(-90deg); }
.legend { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); }
.legend b { width: 8px; height: 8px; display: block; }

/* ---- Delta indicators ---- */
.delta { display: inline-flex; align-items: center; gap: 4px; font-weight: 600;
         font-size: 12px; font-variant-numeric: tabular-nums; }
.delta.up   { color: var(--em-500); }
.delta.down { color: var(--err); }
[data-theme="dark"] .delta.up { color: var(--em-400); }