/* ============================================================
   MORLANG · CAFÉ & RESTAURANT
   brand.css — single source of truth for the whole identity
   Imported by the brand showcase, website, print cards & flyers.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Jost:wght@300;400;500;600&display=swap");

:root{
  /* ---- core palette (dark / primary) ---- */
  --canal-black:#15110c;   /* deepest warm black — primary bg            */
  --espresso:#1c1711;      /* raised surface                              */
  --cocoa:#211b13;         /* cards                                       */
  --bone:#f2e9d6;          /* warm off-white text on dark                 */
  --parchment:#f5efe2;     /* cream paper bg (light theme)                */
  --linen:#fffaf0;         /* light surface                               */

  /* ---- gold family ---- */
  --gold:#c9a35a;          /* brass — primary accent                      */
  --champagne:#f3dd9b;     /* highlight gold                              */
  --antique:#8a6a2f;       /* deep gold — accents on cream                */
  --gold-grad:linear-gradient(115deg,#8a6a2f 0%,#d9b766 28%,#f3dd9b 52%,#c9a35a 78%,#9c7836 100%);

  /* ---- semantic (dark theme defaults) ---- */
  --bg:var(--canal-black);
  --surface:var(--cocoa);
  --ink:var(--bone);
  --ink-soft:rgba(242,233,214,.62);
  --ink-faint:rgba(242,233,214,.34);
  --accent:var(--gold);
  --accent-hi:var(--champagne);
  --line:rgba(201,163,90,.26);
  --line-soft:rgba(201,163,90,.12);

  /* ---- type ---- */
  --serif:"Cormorant",Georgia,serif;
  --sans:"Jost",system-ui,-apple-system,sans-serif;

  /* ---- type scale (fluid) ---- */
  --t-eyebrow:clamp(10px,.75vw,12px);
  --t-body:clamp(15px,1.1vw,16.5px);
  --t-h3:clamp(22px,2.4vw,28px);
  --t-h2:clamp(30px,4vw,46px);
  --t-h1:clamp(44px,7vw,92px);
  --t-display:clamp(64px,12vw,180px);

  /* ---- spacing / radius ---- */
  --sp:8px;
  --gut:clamp(20px,5vw,72px);     /* page gutter */
  --radius:0px;                    /* Morlang is sharp-cornered & classic */
  --shadow:0 28px 70px -34px rgba(0,0,0,.85);

  --tracking-label:.4em;           /* the signature wide-tracked caps */
}

/* ---- CREAM / LIGHT THEME ---- */
.theme-cream{
  --bg:var(--parchment);
  --surface:var(--linen);
  --ink:#241d12;
  --ink-soft:rgba(36,29,18,.66);
  --ink-faint:rgba(36,29,18,.40);
  --accent:var(--antique);
  --accent-hi:#a9823c;
  --line:rgba(138,106,47,.30);
  --line-soft:rgba(138,106,47,.16);
  --gold-grad:linear-gradient(115deg,#7a5a26 0%,#a9823c 40%,#caa14f 70%,#8a6a2f 100%);
}

/* ============================================================
   BASE
   ============================================================ */
*{box-sizing:border-box;}
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-weight:300;line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}

/* ============================================================
   TYPOGRAPHY PRIMITIVES
   ============================================================ */
.m-eyebrow{
  font-family:var(--sans);font-weight:400;
  font-size:var(--t-eyebrow);letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--accent);
}
.m-h1{font-family:var(--serif);font-weight:600;font-size:var(--t-h1);line-height:1.02;letter-spacing:.005em;margin:0;}
.m-h2{font-family:var(--serif);font-weight:600;font-size:var(--t-h2);line-height:1.05;letter-spacing:.008em;margin:0;}
.m-h3{font-family:var(--serif);font-weight:600;font-size:var(--t-h3);line-height:1.1;margin:0;}
.m-display{font-family:var(--serif);font-weight:600;font-size:var(--t-display);line-height:.9;letter-spacing:.01em;margin:0;}
.m-serif-it{font-family:var(--serif);font-style:italic;font-weight:500;}
.m-body{font-family:var(--sans);font-weight:300;font-size:var(--t-body);color:var(--ink-soft);line-height:1.65;}
.m-lead{font-family:var(--serif);font-weight:400;font-size:var(--t-h3);line-height:1.4;color:var(--ink);}

.m-gold{
  color:#e9c87e;                       /* solid champagne-brass — reliable & legible */
  -webkit-text-fill-color:#e9c87e;
}
/* Opt-in metallic shimmer for SMALL decorative accents only (eyebrows, short labels,
   single glyphs). Avoid on long/large headings: Blink's background-clip:text paint
   region can clip wide gradient text and drop trailing words. */
.m-shimmer{
  background:var(--gold-grad);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

a{color:var(--accent);text-decoration:none;}

/* ============================================================
   SIGNATURE MOTIFS
   ============================================================ */
/* hairline gold rule */
.m-rule{height:1px;width:100%;
  background:linear-gradient(90deg,transparent,var(--line) 16%,var(--line) 84%,transparent);}

/* rotated-square diamond bullet */
.m-diamond{width:7px;height:7px;flex:0 0 auto;transform:rotate(45deg);
  background:var(--gold-grad);box-shadow:0 0 10px rgba(201,163,90,.4);}

/* rule · diamond · rule ornament */
.m-orn{display:flex;align-items:center;gap:14px;justify-content:center;}
.m-orn .m-rule{flex:1;}

/* dotted halftone ring — echoes the logo's circular border */
.m-ring{
  position:relative;border-radius:50%;
  background:
    repeating-conic-gradient(from 0deg, var(--accent) 0deg .6deg, transparent .6deg 6deg);
  -webkit-mask:radial-gradient(circle, transparent 0 calc(50% - 2px), #000 calc(50% - 2px) 50%, transparent 50%);
          mask:radial-gradient(circle, transparent 0 calc(50% - 2px), #000 calc(50% - 2px) 50%, transparent 50%);
  opacity:.5;
}

/* tag pill (V / VG etc) */
.m-tag{
  display:inline-block;font-family:var(--sans);font-weight:500;font-size:8.5px;
  letter-spacing:.14em;color:var(--accent-hi);border:1px solid var(--line);
  border-radius:3px;padding:2px 5px;line-height:1;vertical-align:2px;
}

/* buttons */
.m-btn{
  display:inline-flex;align-items:center;gap:10px;cursor:pointer;
  font-family:var(--sans);font-weight:400;font-size:13px;
  letter-spacing:.22em;text-transform:uppercase;
  padding:14px 28px;border:1px solid var(--accent);color:var(--accent);
  background:transparent;transition:.35s ease;border-radius:var(--radius);
}
.m-btn:hover{background:var(--accent);color:var(--bg);}
.m-btn--solid{background:var(--gold-grad);color:#1a140d;border-color:transparent;}
.m-btn--solid:hover{filter:brightness(1.08);}

/* subtle page grain (overlay) */
.m-grain::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:40;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.022'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

.m-wrap{max-width:1200px;margin:0 auto;padding-inline:var(--gut);}