/* ============================================================
   A MAKER'S FIELD BOOK — Rahaf Atef Al-Shurman
   Tactile storybook portfolio. Base system + 7-realm palettes.
   ============================================================ */

/* ---------- Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Libre+Caslon+Display&family=Libre+Caslon+Text:ital,wght@0,400;0,700;1,400&family=Space+Grotesk:wght@400;500;600;700&family=Space+Mono:ital,wght@0,400;0,700;1,400&family=Cairo:wght@400;600;700;900&family=Noto+Naskh+Arabic:wght@400;500;600;700&display=swap');

/* ---------- Color system: global base + 7 realms ---------- */
:root{
  /* global base (Analog spine) */
  --terracotta:#C4603D;
  --linen:#F2E8D9;
  --cream:#FAF6EF;
  --sage:#7A9E87;
  --ink:#1C1209;
  --ink-soft:#4a3a2c;

  /* cat */
  --cat-orange:#E08A3C;
  --cat-orange-deep:#C26A22;
  --cat-cream:#F6E7CE;
  --cat-stripe:#B85C1E;

  /* realm tokens (active realm pushes these onto the page) */
  --realm-bg:var(--cream);
  --realm-paper:var(--linen);
  --realm-ink:var(--ink);
  --realm-accent:var(--terracotta);
  --realm-accent2:var(--sage);

  /* page-turn (driven by tweaks) */
  --turn-ms:900ms;

  /* wood desk */
  --wood-1:#6b4528;
  --wood-2:#5a371f;
  --wood-3:#7a4f2e;

  --shadow-soft:0 18px 50px -20px rgba(28,18,9,.55);
  --serif-display:'Libre Caslon Display', Georgia, serif;
  --serif-text:'Libre Caslon Text', Georgia, serif;
  --grotesk:'Space Grotesk', system-ui, sans-serif;
  --mono:'Space Mono', ui-monospace, monospace;
  --arabic-display:'Cairo', sans-serif;
  --arabic-text:'Noto Naskh Arabic', serif;
}

/* per-realm palette classes — applied to the book spread */
.realm-analog{
  --realm-bg:var(--cream); --realm-paper:#efe4d2; --realm-ink:#1C1209;
  --realm-accent:#C4603D; --realm-accent2:#7A9E87;
}
.realm-infographic{
  --realm-bg:#F8F8F5; --realm-paper:#ffffff; --realm-ink:#445566;
  --realm-accent:#2D7DD2; --realm-accent2:#445566;
}
.realm-risograph{
  --realm-bg:#F4ECDC; --realm-paper:#f7f0e2; --realm-ink:#23201d;
  --realm-accent:#F2503B; --realm-accent2:#2BBFB3;
}
.realm-googie{
  --realm-bg:#0A0A0A; --realm-paper:#141414; --realm-ink:#E8E0D0;
  --realm-accent:#00FFD1; --realm-accent2:#E8E0D0;
}
.realm-pottery{
  --realm-bg:#e9dcc8; --realm-paper:#e3d3ba; --realm-ink:#5a4030;
  --realm-accent:#8B6045; --realm-accent2:#9FB8A0;
}
.realm-scandi{
  --realm-bg:#F5F5F2; --realm-paper:#fbfbf9; --realm-ink:#3a4452;
  --realm-accent:#B8A06A; --realm-accent2:#6B7A8D;
}
.realm-wabisabi{
  --realm-bg:#E8DDD0; --realm-paper:#e0d4c4; --realm-ink:#3A3530;
  --realm-accent:#8C8880; --realm-accent2:#3A3530;
}

/* ---------- Reset / base ---------- */
*{box-sizing:border-box;}
html,body{margin:0;height:100%;}
body{
  font-family:var(--serif-text);
  color:var(--ink);
  background:
    radial-gradient(120% 90% at 50% 0%, #7a4f2e 0%, #5a371f 55%, #3f2716 100%);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
[dir="rtl"] body{font-family:var(--arabic-text);}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
img{display:block;max-width:100%;}

/* wood grain overlay on desk */
#app{position:fixed;inset:0;display:grid;place-items:center;}
#app::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    repeating-linear-gradient(92deg, rgba(0,0,0,.05) 0 2px, transparent 2px 7px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 38px),
    radial-gradient(140% 120% at 50% 35%, rgba(255,210,150,.10), transparent 60%);
  mix-blend-mode:overlay;
}
#app::after{ /* vignette */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(110% 90% at 50% 42%, transparent 55%, rgba(0,0,0,.45));
}

/* ---------- Paper texture utility ---------- */
.paper{
  position:relative;
  background-color:var(--realm-paper);
}
.paper::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  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' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}