/* Cotta Cube - brand layer: palette, roles, type, lockup, buttons. creativa-web, 8 Oct 2026.
   Source: companies/cotta-cube/brand-guidelines.md s4 (confirmed 18 Aug 2026): seven hexes and four
   families. Nothing else enters this file. Load it before the layout stylesheet; pages use the ROLE
   tokens, never the palette names.
   Fonts are self-hosted from assets/fonts/ (cube-pro privacy read, 8 Oct 2026: no third-party font host).
   All four are SIL Open Font License 1.1; each licence text sits beside its files. Only the faces the pages
   use: Fraunces 600 and Work Sans 400/500/700 (latin), Amiri 700 and Cairo 400/700 (arabic + latin).
   Files and unicode-ranges are as Google Fonts served them on 8 Oct 2026 (Fraunces v38, Work Sans v24,
   Amiri v30, Cairo v31); one variable file serves every weight of Fraunces, Work Sans and Cairo.
   Each page head preloads fraunces-latin and worksans-latin only (above the fold in the default language).
   Swap: Lorik's mark (due 3 Nov) replaces assets/mark.svg and assets/mark-on-dark.svg only. If his typeface
   comes with it, only the @font-face rules and the four --font-* roles below change. */
@font-face{font-family:"Fraunces";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/fraunces-latin.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:"Work Sans";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/worksans-latin.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:"Work Sans";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/worksans-latin.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:"Work Sans";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/worksans-latin.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:"Amiri";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/amiri-700-arabic.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC7,U+10EC9-10EEE,U+10EF0-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1}
@font-face{font-family:"Amiri";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/amiri-700-latin.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:"Cairo";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/cairo-arabic.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC7,U+10EC9-10EEE,U+10EF0-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1}
@font-face{font-family:"Cairo";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/cairo-latin.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:"Cairo";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/cairo-arabic.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC7,U+10EC9-10EEE,U+10EF0-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1}
@font-face{font-family:"Cairo";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/cairo-latin.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}
:root{
  /* palette: the only hexes on the site */
  --terracotta:#B4552D;--fired-clay:#7A3B22;--kiln-glow:#F0C070;--ochre-sand:#E7A76B;
  --warm-sand:#EFE1CE;--bisque:#F7EFE2;--kiln-char:#241A12;

  /* roles. Contrast is against --canvas unless stated */
  --canvas:var(--bisque);          /* page ground */
  --surface:var(--warm-sand);      /* panels and cards on the canvas; reversed text on --ink (13.3:1) */
  --ink:var(--kiln-char);          /* text 14.9:1; dark grounds */
  --brand:var(--terracotta);       /* primary: buttons, accents. 4.3:1, so as text only 24px+, or 19px+ bold */
  --brand-deep:var(--fired-clay);  /* borders, depth, hover, body links 7.4:1 */
  --on-brand:var(--bisque);        /* text on --brand 4.3:1 (large only), on --brand-deep 7.4:1 */
  --accent:var(--kiln-glow);       /* the fire. ACCENT ONLY, NEVER A LARGE SURFACE: no section, panel, hero,
                                      card or button fill. Never text on a light ground (1.5:1). On --ink 10.1:1 */
  --highlight:var(--ochre-sand);   /* warm highlight on dark grounds, 8.2:1 on --ink. Not text on the canvas (1.8:1) */
  --line:color-mix(in srgb,var(--brand-deep) 30%,transparent);

  /* type roles */
  --font-en-head:"Fraunces",Georgia,"Times New Roman",serif;
  --font-en-body:"Work Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-ar-head:"Amiri","Noto Naskh Arabic","Times New Roman",serif;
  --font-ar-body:"Cairo","Noto Sans Arabic",system-ui,sans-serif;
  --font-head:var(--font-en-head);--font-body:var(--font-en-body);

  /* the mark. 44px is the guideline minimum; 16px only as the favicon */
  --mark:44px;
}
html[lang="ar"]{--font-head:var(--font-ar-head);--font-body:var(--font-ar-body)}

body{margin:0;background:var(--canvas);color:var(--ink);font-family:var(--font-body);font-weight:400;font-size:17px;line-height:1.6}
html[lang="ar"] body{line-height:1.8}
@media(min-width:720px){body{font-size:18px}}
h1,h2,h3{font-family:var(--font-head);font-weight:600;line-height:1.12;margin:0}
html[lang="ar"] :is(h1,h2,h3){font-weight:700;line-height:1.4}
a{color:var(--brand-deep);text-underline-offset:3px;text-decoration-thickness:1px;transition:color .3s}
a:hover{color:var(--brand)}
:focus-visible{outline:2px solid var(--brand);outline-offset:4px;border-radius:2px}

/* a dark ground (footer, a feature band). Kiln Char behind, never Kiln Glow */
.on-dark{background:var(--ink);color:var(--surface)}
.on-dark a:not([class]){color:var(--highlight)}
.on-dark a:not([class]):hover{color:var(--accent)}
.on-dark :focus-visible{outline-color:var(--accent)}

/* ===== lockup: the empty shell beside both names as live text. English and Arabic are equals and are
   never separated (guidelines s4); the page language leads and both lines sit flush to the mark side.
   Scales from one variable: --mark (52px in a 64px bar, as Mud Cup sizes its lockup at bar - 12).
   <a class="lockup" href="/">
     <img class="lockup-mark" src="/assets/mark.svg" alt="" width="44" height="44">
     <span class="lockup-names"><span class="lockup-en" lang="en">Cotta Cube</span><span class="lockup-ar" lang="ar" dir="rtl">كوتا كيوب</span></span>
   </a>
   On a .on-dark ground use /assets/mark-on-dark.svg. Clear space around it: one third of --mark. ===== */
.lockup{display:inline-flex;align-items:center;gap:calc(var(--mark)*.26);color:var(--ink);text-decoration:none;line-height:1}
.lockup:hover{color:var(--ink)}
.on-dark .lockup,.on-dark .lockup:hover{color:var(--canvas)}
.lockup-mark{display:block;flex:none;width:var(--mark);height:var(--mark);object-fit:contain}
.lockup-names{display:flex;flex-direction:column;align-items:flex-start;gap:calc(var(--mark)*.06)}
.lockup-en{font-family:var(--font-en-head);font-weight:600;font-size:calc(var(--mark)*.42);line-height:1;letter-spacing:.01em;white-space:nowrap}
.lockup-ar{font-family:var(--font-ar-head);font-weight:700;font-size:calc(var(--mark)*.47);line-height:1.05;white-space:nowrap}
html[lang="ar"] .lockup-ar{order:-1}

/* ===== buttons. Terracotta fill needs large text for AA (4.3:1), so 19px bold ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:10px 26px;border-radius:999px;font-family:var(--font-body);font-weight:700;font-size:19px;line-height:1.2;text-decoration:none;border:1.5px solid var(--brand);background:var(--brand);color:var(--on-brand);transition:background .3s,border-color .3s,color .3s}
.btn:hover{background:var(--brand-deep);border-color:var(--brand-deep);color:var(--on-brand)}
.btn--quiet{background:none;color:var(--ink);border-color:var(--ink)}
.btn--quiet:hover{background:var(--ink);border-color:var(--ink);color:var(--canvas)}
.on-dark .btn--quiet{color:var(--surface);border-color:var(--surface)}
.on-dark .btn--quiet:hover{background:var(--surface);color:var(--ink)}

/* ===== a fact nobody has yet: visible on purpose, and the build refuses to ship a page that has one ===== */
[data-gap]{outline:1.5px dashed var(--brand-deep);outline-offset:3px;border-radius:2px;background:repeating-linear-gradient(135deg,transparent 0 10px,color-mix(in srgb,var(--brand) 8%,transparent) 10px 20px)}
.on-dark [data-gap]{outline-color:var(--highlight)}