/*
  DESIGN TOKENS — shared by olivermorocz.com and shop.olivermorocz.com
  ---------------------------------------------------------------------
  From the Claude Design hand-off v1.0 (design/tokens/om-tokens.css, 2026-10-16).
  The same values as data: tokens.json (for the shop theme).

  Every colour, font, texture and motion value used on both sites comes from here.
  Change a value here and both sites change with it.

  How to read a line:   --name: value;   (the name never changes, only the value)
  Picture paths start with "/" so they work from any stylesheet that uses them.
*/

/* ---- Fonts (self-hosted, SIL Open Font License, licences in /fonts) ---- */
@font-face { font-family: 'Doto'; src: url(fonts/doto-latin-800-normal.woff2) format('woff2'); font-weight: 800; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Doto'; src: url(fonts/doto-latin-ext-800-normal.woff2) format('woff2'); font-weight: 800; font-display: swap; unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Bungee'; src: url(fonts/bungee-latin-400-normal.woff2) format('woff2'); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Bungee'; src: url(fonts/bungee-latin-ext-400-normal.woff2) format('woff2'); font-weight: 400; font-display: swap; unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Instrument Sans'; src: url(fonts/instrument-sans-latin-wght-normal.woff2) format('woff2-variations'); font-weight: 400 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Instrument Sans'; src: url(fonts/instrument-sans-latin-ext-wght-normal.woff2) format('woff2-variations'); font-weight: 400 700; font-display: swap; unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  /* ---- Colour: accents (also the label dots on the posts) ---- */
  --om-orange: #FF5A1F;        /* blocks, CTA fills (ink text on it 5.7:1) */
  --om-orange-text: #E8470C;   /* orange type on the surface, bold 19px+ only (3.4:1) */
  --om-pink: #FF8DC7;
  --om-green: #1E4D3B;
  --om-blue: #2F62F5;
  --om-yellow: #FFD91A;        /* logo yellow */
  --om-sand: #D8C4B0;          /* logo beige */

  /* ---- Colour: text ---- */
  --om-ink: #1A1712;           /* main text */
  --om-ink-2: #5C554B;         /* secondary and engraved text (6.4:1) */
  --om-placeholder: #8A8174;   /* placeholder text in form fields */
  --om-mist: #EBE3D6;          /* empty picture area */

  /* ---- The material: one textured surface for every bar ---- */
  --om-panel: #F7F7F7;                                  /* bar colour: the grain sits on top of it, so changing it recolours every bar */
  --om-texture: url(/assets/textures/panel-grain.png);  /* grey grain with see-through parts (white/black dots), tiles every 180 px */
  --om-texture-size: 180px;
  --om-chamfer: 8px;                                    /* groove between two bars */
  --om-scrim: rgba(26, 23, 18, .4);                     /* darkening behind an open window */
  --om-scrim-blur: 10px;

  /* ---- Keys ---- */
  --om-key-top: #FCFAF6;  --om-key-bottom: #E8E1D5;     /* cream key face */
  --om-key-side: #CFC5B5; --om-key-side-2: #BCB1A0;     /* its two side steps */
  --om-key-orange-top: #FF7C48; --om-key-orange-bottom: #FF5A1F;
  --om-key-orange-side: #D9450F; --om-key-orange-side-2: #B33909;
  --om-key-radius: 14px;
  --om-portrait-size: 32px; --om-portrait-opacity: .8;   /* pixel portrait on the About me key (16px drawing, shown 2x) */

  /* ---- Display (dot-matrix screen) and dark screens ---- */
  --om-display-bg: #15120E;
  --om-display-bg-top: #1D1914;
  --om-display-fg: #FF6A2A;

  /* ---- Form fields ---- */
  --om-well: #E3DBCE;
  --om-led-off: #C9BFB0;

  /* ---- Type ---- */
  --om-display: 'Bungee', 'Arial Black', system-ui, sans-serif;     /* keys and titles */
  --om-body: 'Instrument Sans', 'Helvetica Neue', system-ui, sans-serif;
  --om-digital: 'Doto', 'VT323', ui-monospace, monospace;           /* the display */

  /* ---- Radii ---- */
  --om-r-window: 22px;
  --om-r-screen: 20px;
  --om-r-well: 12px;
  --om-r-pill: 999px;

  /* ---- Glass posts ----
     Try these values live on the tuning page: /tools/glass/ (test site and preview only).
     The page's "Copy values" button gives you this block ready to paste back here. */
  --om-glass-edge: 6px;           /* bevel width on desktop (was 9px, one third smaller 2026-10-17) */
  --om-glass-edge-sm: 4.7px;      /* bevel width on phone (was 7px) */
  --om-glass-band: 3;             /* the glass edge is this many bevel widths wide */
  --om-glass-lens-zoom: 1.2;      /* how much the picture is magnified under the edge */
  --om-glass-lens-blur: 1.1px;    /* softness of the magnified edge */
  --om-glass-lens-saturate: 1.2;  /* colour boost under the edge */
  --om-glass-lens-bright: 1.08;   /* brightness under the edge */
  --om-glass-bevel-blur: 2.2px;   /* softness of the edge light */
  --om-glass-light: .63;            /* strength of the bright top-left edge (0 = none) */
  --om-glass-shade: .59;            /* strength of the dark bottom-right edge (0 = none) */
  --om-glass-tint: rgba(214, 238, 228, .18); /* the hint of glass green on the edge */
  --om-glass-rim: 6px;            /* width of the thin bright line on the outline */
  --om-glass-rim-blur: 3px;      /* its softness */
  --om-glass-rim-opacity: 1;      /* its strength */
  --om-glass-sheen: 1;            /* strength of the reflection on the face */
  --om-glass-hover-sheen: .6;     /* extra reflection while the pointer is over a post */
  --om-glass-hover-gloss: .3;     /* extra corner highlights on hover */
  --om-glass-hover-light: 1.35;   /* brightness of the edge light on hover (1 = none) */
  --om-glass-gloss: .7;            /* strength of the inner corner highlights */
  --om-glass-image-saturate: 1; /* colour of the picture itself */
  --om-glass-image-contrast: 1; /* contrast of the picture itself */
  /* Liquid glass edge (src/js/glass.js): a real curved bevel that bends the picture.
     Tuned by Oli on /tools/glass/ (17 Oct). The feed uses it on phone and desktop; the edge values above are only the fallback without JavaScript. */
  --om-glass-bevel: 44.5px;         /* width of the curved edge on desktop */
  --om-glass-bevel-sm: 21.5px;      /* same on phone */
  --om-glass-roundness: 6;        /* 1 = straight chamfer, 2 = round, higher = flat top with a steep drop */
  --om-glass-refraction: 40;      /* how far the picture bends at the steepest point, px (negative bends outward) */
  --om-glass-dispersion: .1;     /* rainbow split of the colours at the rim (0 = none) */
  --om-glass-spec: .64;             /* strength of the sharp highlight on the curve */
  --om-glass-spec-size: 120;       /* higher = smaller, sharper highlight */
  --om-glass-light-angle: 201;    /* where the light comes from, degrees (225 = top left) */
  --om-shape-rsquare: url(/assets/shapes/shape-rsquare.svg);     /* phone posts */
  --om-shape-rportrait: url(/assets/shapes/shape-rportrait.svg); /* desktop posts, 3:4 */
  --om-mark: url(/assets/logo/om-mark-black.png);                /* embossed logo mask */

  /* ---- Motion ---- */
  --om-ease: cubic-bezier(.2, .8, .2, 1);

  /* ---- Video loading indicator (spinning ring over the still picture) ---- */
  --loader-size:       44px;
  --loader-thickness:  3px;
  --loader-color:      rgba(255, 255, 255, 0.95);
  --loader-track:      rgba(255, 255, 255, 0.25);
  --loader-backdrop:   rgba(0, 0, 0, 0.35);
  --loader-speed:      0.9s;
}

/* Label dot colours: class="c-pink" etc. on a post sets its accent. */
.c-orange { --c: var(--om-orange); }
.c-pink { --c: var(--om-pink); }
.c-green { --c: var(--om-green); }
.c-blue { --c: var(--om-blue); }
.c-yellow { --c: var(--om-yellow); }
.c-sand { --c: var(--om-sand); }