/* ════════════════════════════════════════════════════════════════════
   FRIDA — ONE type system for every guest-facing page.
   ────────────────────────────────────────────────────────────────────
   Owner's brief: "I want people to feel naturally using iPhone while on
   our page — same feel of text style, natural embedding to the latest
   style."

   So the rule for the whole site is:

     • ALL reading and interface text is native Apple type — SF Pro via
       -apple-system, at Apple's own iOS text-style ramp, with Apple's
       own tracking. On an iPhone this resolves to the real system font,
       which is the single biggest reason a page reads as native.
     • The brand display serif is reserved for the FRIDA WORDMARK ONLY.
       A native iPhone surface, signed FRIDA. Nothing else uses it.
     • Structure follows iOS too: grouped inset lists with leading-inset
       separators, uppercase footnote section headers, 44pt hit targets,
       translucent material bars, safe-area insets.

   Load this FIRST on every page, then a page may add its own layout —
   but it must not redefine type. One ramp, one hierarchy, everywhere.
   ════════════════════════════════════════════════════════════════════ */

:root{
  /* ── families ────────────────────────────────────────────────────
     -apple-system resolves to SF Pro on Apple platforms and degrades
     to the platform UI font elsewhere, which is what we want: native
     everywhere, not "Apple cosplay" on Android. */
  --sf:'SF Pro Text',-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro',
       system-ui,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --sf-rounded:ui-rounded,'SF Pro Rounded',var(--sf);
  --sf-mono:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace;
  /* the signature — wordmark only, never body text */
  --brand-display:'Playfair Display',Georgia,'Times New Roman',serif;

  /* ── the iOS text-style ramp ─────────────────────────────────────
     Apple's iOS sizes/leading at the default (Large) Dynamic Type step,
     with Apple's optical tracking. Note the sign flip at the SF Text ↔
     SF Display crossover (20pt): small styles get negative tracking,
     display styles get positive. Copying that is what makes it read
     right rather than merely "a sans-serif". */
  --t-large-title:34px;   --lh-large-title:41px;   --tk-large-title:.374px;
  --t-title1:28px;        --lh-title1:34px;        --tk-title1:.364px;
  --t-title2:22px;        --lh-title2:28px;        --tk-title2:.35px;
  --t-title3:20px;        --lh-title3:25px;        --tk-title3:.38px;
  --t-headline:17px;      --lh-headline:22px;      --tk-headline:-.408px;
  --t-body:17px;          --lh-body:22px;          --tk-body:-.408px;
  --t-callout:16px;       --lh-callout:21px;       --tk-callout:-.32px;
  --t-subhead:15px;       --lh-subhead:20px;       --tk-subhead:-.24px;
  --t-footnote:13px;      --lh-footnote:18px;      --tk-footnote:-.078px;
  --t-caption1:12px;      --lh-caption1:16px;      --tk-caption1:0px;
  --t-caption2:11px;      --lh-caption2:13px;      --tk-caption2:.066px;

  /* ── metrics ─────────────────────────────────────────────────────
     44pt is Apple's minimum comfortable hit target; the 16pt gutter and
     10pt inset-group radius are the Settings/Mail defaults. */
  --tap:44px;
  --gutter:16px;
  --r-group:10px;
  --r-card:14px;
  --r-control:12px;
  --sep-inset:16px;
  --ease-ios:cubic-bezier(.32,.72,0,1);

  /* ── colour: iOS semantic roles, FRIDA's own hues ────────────────
     iOS structure, FRIDA colour. These are the DARK values because the
     restaurant's surfaces are night surfaces; the light set is below.
     Neutrals are warmed toward the marigold accent — a neutral that was
     chosen, not inherited. */
  --bg:#0d0604;                       /* systemBackground            */
  --bg-elevated:#170e08;              /* secondarySystemBackground   */
  --bg-grouped:#0a0503;               /* systemGroupedBackground     */
  --bg-group:#1a1009;                 /* secondarySystemGrouped      */
  --bg-group2:#241708;                /* tertiarySystemGrouped       */
  --fill:rgba(245,222,190,.12);       /* systemFill                  */
  --fill2:rgba(245,222,190,.08);
  --fill3:rgba(245,222,190,.05);
  --label:#f7edd9;                    /* label                       */
  --label2:rgba(247,237,217,.62);     /* secondaryLabel              */
  --label3:rgba(247,237,217,.36);     /* tertiaryLabel               */
  --label4:rgba(247,237,217,.20);     /* quaternaryLabel             */
  --sep:rgba(212,139,60,.20);         /* separator                   */
  --sep-opaque:#2a1a0e;               /* opaqueSeparator             */
  --tint:#f5a623;                     /* the accent — marigold       */
  --tint-press:#e8890a;
  --gold-pale:#fff3cf;
  --green:#4e9640; --red:#e0543c; --amber:#e0a92e; --blue:#4a9fd8;
  --material:saturate(180%) blur(24px);

  color-scheme:dark;
}

/* Light appearance — same roles, warm paper instead of warm ink.
   Honoured only where a page opts in with data-appearance="light";
   the guest pages are deliberately night surfaces. */
:root[data-appearance="light"]{
  --bg:#fbf7ef; --bg-elevated:#fff; --bg-grouped:#f2ece1; --bg-group:#fff; --bg-group2:#f7f2e8;
  --fill:rgba(60,40,20,.09); --fill2:rgba(60,40,20,.06); --fill3:rgba(60,40,20,.04);
  --label:#1c1206; --label2:rgba(28,18,6,.60); --label3:rgba(28,18,6,.34); --label4:rgba(28,18,6,.18);
  --sep:rgba(120,80,30,.22); --sep-opaque:#e0d5c2;
  --tint:#c87c08; --tint-press:#a86500;
  color-scheme:light;
}

/* ════════════════════════════════════════════════════════════════
   BASE
   ════════════════════════════════════════════════════════════════ */
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--label);
  font-family:var(--sf);
  font-size:var(--t-body);line-height:var(--lh-body);letter-spacing:var(--tk-body);
  font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-optical-sizing:auto;
  text-rendering:optimizeLegibility;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
/* Digits in columns, prices and counters must not dance */
.num,.t-mono{font-variant-numeric:tabular-nums}
.t-mono{font-family:var(--sf-mono)}
a{color:var(--tint);text-decoration:none}
button,input,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit;letter-spacing:inherit;color:inherit}
button{border:none;background:none;cursor:pointer}
img,svg,video{max-width:100%;height:auto;display:block}
::-webkit-scrollbar{width:0;height:0}
:focus-visible{outline:2.5px solid var(--tint);outline-offset:2px;border-radius:4px}

/* ════════════════════════════════════════════════════════════════
   THE RAMP  —  use these classes, do not invent sizes
   ════════════════════════════════════════════════════════════════ */
.t-large-title{font-size:var(--t-large-title);line-height:var(--lh-large-title);letter-spacing:var(--tk-large-title);font-weight:700}
.t-title1    {font-size:var(--t-title1);line-height:var(--lh-title1);letter-spacing:var(--tk-title1);font-weight:700}
.t-title2    {font-size:var(--t-title2);line-height:var(--lh-title2);letter-spacing:var(--tk-title2);font-weight:700}
.t-title3    {font-size:var(--t-title3);line-height:var(--lh-title3);letter-spacing:var(--tk-title3);font-weight:600}
.t-headline  {font-size:var(--t-headline);line-height:var(--lh-headline);letter-spacing:var(--tk-headline);font-weight:600}
.t-body      {font-size:var(--t-body);line-height:var(--lh-body);letter-spacing:var(--tk-body);font-weight:400}
.t-callout   {font-size:var(--t-callout);line-height:var(--lh-callout);letter-spacing:var(--tk-callout);font-weight:400}
.t-subhead   {font-size:var(--t-subhead);line-height:var(--lh-subhead);letter-spacing:var(--tk-subhead);font-weight:400}
.t-footnote  {font-size:var(--t-footnote);line-height:var(--lh-footnote);letter-spacing:var(--tk-footnote);font-weight:400}
.t-caption1  {font-size:var(--t-caption1);line-height:var(--lh-caption1);letter-spacing:var(--tk-caption1);font-weight:400}
.t-caption2  {font-size:var(--t-caption2);line-height:var(--lh-caption2);letter-spacing:var(--tk-caption2);font-weight:400}
.t-secondary{color:var(--label2)}
.t-tertiary {color:var(--label3)}
.t-tint     {color:var(--tint)}
h1,h2,h3,h4,h5,h6{font-weight:700;letter-spacing:var(--tk-title2);text-wrap:balance}
h1{font-size:var(--t-title1);line-height:var(--lh-title1);letter-spacing:var(--tk-title1)}
h2{font-size:var(--t-title2);line-height:var(--lh-title2)}
h3{font-size:var(--t-title3);line-height:var(--lh-title3);letter-spacing:var(--tk-title3);font-weight:600}
h4,h5,h6{font-size:var(--t-headline);line-height:var(--lh-headline);letter-spacing:var(--tk-headline);font-weight:600}
p{text-wrap:pretty}

/* ── Dynamic Type ────────────────────────────────────────────────
   On an iPhone or iPad, adopt the reader's OWN text-size setting: the
   `font: -apple-system-*` shorthands are live Dynamic Type. A guest who
   has bumped their text size sees this page respond exactly like Mail
   or Messages — that is the "natural embedding" the brief asks for.
   Scoped to touch Apple devices on purpose: on macOS the same keywords
   resolve to macOS metrics (13px body) and would shrink the page. */
@media (hover:none) and (pointer:coarse){
  @supports (font:-apple-system-body){
    body,.t-body{font:-apple-system-body;letter-spacing:var(--tk-body)}
    .t-headline{font:-apple-system-headline;letter-spacing:var(--tk-headline)}
    .t-subhead {font:-apple-system-subheadline;letter-spacing:var(--tk-subhead)}
    .t-footnote{font:-apple-system-footnote;letter-spacing:var(--tk-footnote)}
    .t-caption1{font:-apple-system-caption1;letter-spacing:var(--tk-caption1)}
    .t-caption2{font:-apple-system-caption2;letter-spacing:var(--tk-caption2)}
    /* Titles keep their weight after the shorthand resets it */
    .t-large-title{font:-apple-system-title0;font-weight:700;letter-spacing:var(--tk-large-title)}
    .t-title1{font:-apple-system-title1;font-weight:700;letter-spacing:var(--tk-title1)}
    .t-title2{font:-apple-system-title2;font-weight:700;letter-spacing:var(--tk-title2)}
    .t-title3{font:-apple-system-title3;font-weight:600;letter-spacing:var(--tk-title3)}
  }
}

/* ── the wordmark — the ONLY brand-serif in the system ──────────── */
.wordmark{
  font-family:var(--brand-display);font-weight:700;
  letter-spacing:.15em;text-indent:.15em;   /* indent cancels the trailing gap */
  background:linear-gradient(100deg,#b88424 12%,#f6d888 40%,var(--gold-pale) 52%,#f6d888 64%,#b88424 88%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ════════════════════════════════════════════════════════════════
   STRUCTURE
   ════════════════════════════════════════════════════════════════ */
.ios-page{max-width:540px;margin:0 auto;padding:0 var(--gutter)}

/* Navigation bar — translucent material, hairline, safe-area aware.
   .ios-nav .title is the compact title that appears once the large
   title has scrolled away (toggle .showing from script). */
.ios-nav{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;justify-content:center;gap:8px;
  min-height:var(--tap);padding:0 var(--gutter);
  padding-top:env(safe-area-inset-top);
  background:color-mix(in srgb,var(--bg) 72%,transparent);
  backdrop-filter:var(--material);-webkit-backdrop-filter:var(--material);
  border-bottom:.5px solid var(--sep);
}
.ios-nav .title{
  font-size:var(--t-headline);line-height:var(--lh-headline);
  letter-spacing:var(--tk-headline);font-weight:600;
  opacity:0;transition:opacity .25s var(--ease-ios);
}
.ios-nav .title.showing{opacity:1}

/* Grouped inset list — Settings.app geometry */
.ios-section{margin-top:26px;scroll-margin-top:calc(var(--tap) + 22px)}
.ios-section-header{
  font-size:var(--t-footnote);line-height:var(--lh-footnote);letter-spacing:.06em;
  font-weight:400;text-transform:uppercase;color:var(--label2);
  padding:0 var(--gutter);margin-bottom:7px;
  display:flex;align-items:center;gap:8px;
}
.ios-section-footer{
  font-size:var(--t-footnote);line-height:var(--lh-footnote);letter-spacing:var(--tk-footnote);
  color:var(--label2);padding:7px var(--gutter) 0;
}
.ios-list{background:var(--bg-group);border-radius:var(--r-group);overflow:hidden}
.ios-row{
  position:relative;display:flex;align-items:center;gap:12px;
  min-height:var(--tap);padding:11px var(--gutter);
}
/* the separator is inset from the LEADING edge only — the iOS tell */
.ios-row+.ios-row::before{
  content:'';position:absolute;top:0;left:var(--sep-inset);right:0;
  height:.5px;background:var(--sep);
}
.ios-row .label{flex:1;min-width:0}
.ios-row .value{color:var(--label2);text-align:right}
.ios-row.tappable{cursor:pointer}
.ios-row.tappable:active{background:var(--fill3)}
.ios-row .chevron{color:var(--label3);font-size:var(--t-callout);flex:none}
.ios-row.stacked{flex-direction:column;align-items:stretch;gap:7px;padding-top:12px;padding-bottom:13px}
.ios-row.split{display:grid;grid-template-columns:1fr 1fr;gap:0;padding:0}
.ios-row.split>*{padding:12px var(--gutter)}
.ios-row.split>*+*{border-left:.5px solid var(--sep)}

/* Field label above a control — footnote, secondary, never shouty */
.ios-label{
  display:block;font-size:var(--t-footnote);line-height:var(--lh-footnote);
  letter-spacing:var(--tk-footnote);color:var(--label2);margin-bottom:6px;
}

/* Controls */
.ios-field{
  width:100%;min-height:var(--tap);
  background:var(--fill3);border:.5px solid var(--sep);border-radius:var(--r-control);
  padding:10px 13px;outline:none;-webkit-appearance:none;appearance:none;
  transition:border-color .2s,background .2s;
}
.ios-field::placeholder{color:var(--label3)}
.ios-field:focus{border-color:var(--tint);background:var(--fill2)}
select.ios-field{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 13 13'><path d='M3 5l3.5 3.5L10 5' stroke='rgba(247,237,217,.45)' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:34px;
}
textarea.ios-field{min-height:72px;resize:vertical;line-height:var(--lh-body)}

/* Buttons — filled / tinted / plain / destructive, all 44pt tall */
.ios-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-height:var(--tap);padding:12px 20px;border-radius:999px;
  font-size:var(--t-headline);line-height:var(--lh-headline);
  letter-spacing:var(--tk-headline);font-weight:600;
  color:var(--tint);background:var(--fill2);
  transition:transform .18s var(--ease-ios),background .2s,opacity .2s;
  text-decoration:none;
}
.ios-btn:active{transform:scale(.97)}
.ios-btn.filled{
  color:#2a1a06;font-weight:600;
  background:linear-gradient(180deg,var(--gold-pale) 0%,#f6d888 28%,#e8a33a 66%,#c88f20 100%);
  box-shadow:0 6px 20px rgba(232,137,10,.26),inset 0 .5px 0 rgba(255,255,255,.7);
}
.ios-btn.tinted{color:var(--tint);background:color-mix(in srgb,var(--tint) 16%,transparent)}
.ios-btn.plain{background:none;font-weight:400}
.ios-btn.destructive{color:var(--red);background:color-mix(in srgb,var(--red) 13%,transparent)}
.ios-btn:disabled,.ios-btn[aria-disabled="true"]{opacity:.4;pointer-events:none}
.ios-btn-stack{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.ios-btn-row{display:flex;gap:10px;margin-top:10px}
.ios-btn-row>.ios-btn{flex:1}

/* Status pill — caption weight, never larger than the text it annotates */
.ios-pill{
  display:inline-flex;align-items:center;
  font-size:var(--t-caption1);line-height:1;letter-spacing:.04em;
  font-weight:600;text-transform:uppercase;
  padding:5px 10px;border-radius:999px;white-space:nowrap;
  background:var(--fill);color:var(--label2);
}
.ios-pill.good{background:color-mix(in srgb,var(--green) 20%,transparent);color:#8fd07d}
.ios-pill.warn{background:color-mix(in srgb,var(--amber) 20%,transparent);color:#f0c65e}
.ios-pill.info{background:color-mix(in srgb,var(--blue) 20%,transparent);color:#8fc7ea}
.ios-pill.bad {background:color-mix(in srgb,var(--red) 20%,transparent);color:#f08a76}

/* Toast — the iOS-style capsule */
.ios-toast{
  position:fixed;left:50%;bottom:calc(28px + env(safe-area-inset-bottom));
  transform:translateX(-50%) translateY(120px);
  max-width:88vw;padding:12px 22px;border-radius:999px;z-index:60;
  background:color-mix(in srgb,var(--bg-elevated) 92%,transparent);
  border:.5px solid var(--sep);
  backdrop-filter:var(--material);-webkit-backdrop-filter:var(--material);
  font-size:var(--t-subhead);line-height:var(--lh-subhead);
  letter-spacing:var(--tk-subhead);font-weight:600;
  box-shadow:0 12px 34px rgba(0,0,0,.55);
  transition:transform .38s var(--ease-ios);
}
.ios-toast.on{transform:translateX(-50%) translateY(0)}
.ios-toast.err{background:color-mix(in srgb,var(--red) 92%,transparent);color:#fff;border-color:transparent}

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