/* =============================================================================
   Baku Lounge — design tokens
   =============================================================================

   The Café Peri system, re-skinned. Same architecture, same role names, same
   spacing and shape scale; a new palette and an inverted ground.

   Direction: İznik. The tile tradition of Ottoman Anatolia — cobalt blue,
   Armenian bole red, turquoise and white, with brass. The reference build sat
   on warm cream because a breakfast café is a daytime room. A lounge is chosen
   in the evening, so this one sits on midnight cobalt and the tile colours sit
   on top of it the way glaze sits on a dark body.

   Every colour below is measured, not chosen by eye. Figures in comments are
   contrast ratios against the ground the colour is actually used on.
   ========================================================================== */

:root {

  /* ------------------------------------------------------------------ */
  /* BRAND SEED                                                          */
  /* ------------------------------------------------------------------ */

  --ds-seed-ground:  #0d1f33;  /* midnight cobalt — the page              */
  --ds-seed-ink:     #f4efe6;  /* tile bone — headings                    */
  --ds-seed-accent:  #ef7d6d;  /* bole red, lifted for a dark ground      */
  --ds-seed-fill:    #c1372c;  /* bole red at full depth — CTA fills      */
  --ds-seed-brass:   #c9a227;  /* brass — hairlines, logo, ornament       */
  --ds-seed-tile:    #5cc3ba;  /* İznik turquoise — the third glaze       */

  /* ------------------------------------------------------------------ */
  /* SURFACES — the dark ramp                                            */
  /* ------------------------------------------------------------------ */
  /* Deliberately tight. A wider ramp would put the top step light enough
     that the red accent stops clearing 4.5:1 on it, and the accent is the
     one colour that has to work on every ground. */

  --ds-surface:                   #0d1f33;
  --ds-surface-container-lowest:  #07131f;
  --ds-surface-container-low:     #112438;
  --ds-surface-container:         #142a41;
  --ds-surface-container-high:    #17304a;
  --ds-surface-container-highest: #1b3654;
  --ds-surface-dim:               #091825;
  --ds-surface-bright:            #24456a;
  --ds-surface-variant:           #1b3654;
  --ds-inverse-surface:           #f4efe6;   /* the one light section */
  --ds-inverse-on-surface:        #0d1f33;
  --ds-background:                #0d1f33;

  /* Photo and ornament overlay. Darker than the page, so an image reads as
     an image rather than as a panel. */
  --ds-scrim: #050f1a;

  /* ------------------------------------------------------------------ */
  /* INK                                                                 */
  /* ------------------------------------------------------------------ */

  --ds-primary:            #f4efe6;  /* headings          14.54:1 on surface */
  --ds-on-surface:         #e6ddd0;  /* body              12.39:1            */
  --ds-on-surface-variant: #a9bccd;  /* secondary body     8.53:1            */
  --ds-on-primary:         #0d1f33;  /* text on bone grounds                 */
  --ds-primary-container:  #e8dfd1;
  --ds-on-primary-container: #33251a;
  --ds-inverse-primary:    #2b4a6b;

  /* on-surface-variant is a blue-grey mixed from the ground's own hue, not a
     neutral grey. Neutral grey on a coloured ground reads as a fault. */

  /* ------------------------------------------------------------------ */
  /* ACCENT — bole red                                                   */
  /* ------------------------------------------------------------------ */
  /* Two values, because on a dark ground one cannot do both jobs. A red
     light enough to read as text has too little contrast under white; a red
     deep enough to carry white text disappears against the page.

     --ds-secondary       text, icons, links, prices, focus ring
     --ds-secondary-fill  button and chip fills, always with white on top   */

  --ds-secondary:              #ef7d6d;  /* 6.21 surface · 5.02 high · 4.60 highest */
  --ds-secondary-fill:         #c1372c;  /* white on it: 5.45:1                     */
  --ds-on-secondary:           #ffffff;
  --ds-secondary-container:    #8f2018;
  --ds-on-secondary-container: #ffd9d4;

  /* ------------------------------------------------------------------ */
  /* FIXED PAIRS — chips and labels                                      */
  /* ------------------------------------------------------------------ */

  --ds-primary-fixed:              #e8dfd1;
  --ds-on-primary-fixed:           #2b1d12;
  --ds-primary-fixed-dim:          #cdbfa8;
  --ds-on-primary-fixed-variant:   #4a3928;
  --ds-secondary-fixed:            #f7d9d3;
  --ds-on-secondary-fixed:         #5a120c;
  --ds-secondary-fixed-dim:        #ef7d6d;
  --ds-on-secondary-fixed-variant: #7d1c14;

  /* ------------------------------------------------------------------ */
  /* TERTIARY — İznik turquoise                                          */
  /* ------------------------------------------------------------------ */
  /* The third glaze. Used sparingly and never for action: turquoise marks
     the shisha section and the ornament, so it never competes with red. */

  --ds-tertiary:              #5cc3ba;  /* 7.91:1 on surface */
  --ds-on-tertiary:           #04201e;
  --ds-tertiary-container:    #0f4a46;
  --ds-on-tertiary-container: #9fe3dc;
  --ds-tertiary-fixed:        #b8e8e2;
  --ds-tertiary-fixed-dim:    #7fd4cc;

  /* ------------------------------------------------------------------ */
  /* LINES                                                               */
  /* ------------------------------------------------------------------ */

  --ds-outline:         #5a7c9e;  /* 3.82:1 — borders that carry meaning */
  --ds-outline-variant: #33526f;  /* 2.04:1 — decorative hairlines       */

  /* ------------------------------------------------------------------ */
  /* STATUS                                                              */
  /* ------------------------------------------------------------------ */
  /* Re-toned for a dark ground: the reference build's #ba1a1a would read as
     the accent here, which is exactly the confusion an error colour cannot
     afford. */

  --ds-error:              #ffb4ab;
  --ds-on-error:           #690005;
  --ds-error-container:    #93000a;
  --ds-on-error-container: #ffdad6;

  /* ------------------------------------------------------------------ */
  /* BRAND                                                               */
  /* ------------------------------------------------------------------ */

  --ds-brand-brass: #c9a227;  /* 6.88:1 — logo, hairline rules, ornament */

  /* ------------------------------------------------------------------ */
  /* VENUE COLOURS — taken from the room and the shoot, 2026-09          */
  /* ------------------------------------------------------------------ */
  /* The owner asked for the colour of the place on the site: the red walls,
     the palms against the navy damask, the amber lamps, the blue velvet
     chairs and the blue glazed plates. Each one gets a job, so the page gets
     livelier without the red CTA losing its meaning.

     wine / wine-deep     the bar section ground and the hero wash
     palm / palm-deep     the shisha section ground
     palm-light           eyebrow text on palm-deep       9.1:1
     saffron              warm highlight text, glows      9.4:1 on wine-deep
     velvet               cobalt glow behind photographs                     */

  --ds-wine:       #5b1220;
  --ds-wine-deep:  #2c0a12;
  --ds-palm:       #2f8f5b;
  --ds-palm-deep:  #0b2a20;
  --ds-palm-light: #86d9a4;
  --ds-saffron:    #f2a93b;
  --ds-velvet:     #2446a0;

  /* ================================================================== */
  /* TYPE — unchanged from the reference build                           */
  /* ================================================================== */

  --ds-font-display: "Playfair Display", Georgia, serif;
  --ds-font-body:    "Montserrat", system-ui, sans-serif;
  --ds-font-icon:    "Material Symbols Outlined";

  --ds-display-lg-size:     clamp(2.25rem, 5.4vw, 3.75rem);
  --ds-display-lg-leading:  1.06;
  --ds-display-lg-tracking: -0.02em;
  --ds-display-lg-weight:   700;

  --ds-headline-lg-size:     clamp(1.75rem, 3.4vw, 2.5rem);
  --ds-headline-lg-leading:  1.16;
  --ds-headline-lg-tracking: -0.01em;
  --ds-headline-lg-weight:   700;

  --ds-headline-md-size:    clamp(1.125rem, 1.5vw, 1.375rem);
  --ds-headline-md-leading: 1.3;
  --ds-headline-md-weight:  600;

  --ds-body-lg-size:    1.0625rem;
  --ds-body-lg-leading: 1.7;
  --ds-body-md-size:    0.9375rem;
  --ds-body-md-leading: 1.65;

  --ds-label-lg-size:    0.8125rem;
  --ds-label-lg-leading: 1.35;
  --ds-label-lg-weight:  600;
  --ds-label-sm-size:    0.6875rem;
  --ds-label-sm-leading: 1.35;
  --ds-label-sm-weight:  600;

  --ds-tracking-eyebrow: 0.25em;
  --ds-tracking-wide:    0.1em;
  --ds-tracking-chip:    0.05em;

  /* ================================================================== */
  /* SPACE / SHAPE — unchanged                                           */
  /* ================================================================== */

  --ds-base:                8px;
  --ds-grid-margin:         24px;
  --ds-grid-gutter:         24px;
  --ds-section-gap-mobile:  64px;
  --ds-section-gap-desktop: 120px;

  --ds-content-max: 1280px;
  --ds-page-max:    1440px;
  --ds-reading-max: 860px;

  --ds-header-height:    80px;
  --ds-bottomnav-height: 64px;

  --ds-radius-sm:   0.25rem;
  --ds-radius-md:   0.5rem;
  --ds-radius-lg:   0.75rem;
  --ds-radius-full: 9999px;

  /* ================================================================== */
  /* ELEVATION                                                           */
  /* ================================================================== */
  /* On a dark ground a shadow alone does almost nothing — there is no
     lighter surface for it to darken. Depth here comes from a hairline top
     edge catching light plus a shadow beneath, which is how a raised panel
     actually behaves. Shadows stay tinted with the scrim, never pure black. */

  --ds-shadow-header:     0 1px 0 rgb(51 82 111 / 0.6), 0 8px 24px rgb(5 15 26 / 0.5);
  --ds-shadow-bottomnav:  0 -1px 0 rgb(51 82 111 / 0.6), 0 -8px 24px rgb(5 15 26 / 0.5);
  --ds-shadow-card:       0 2px 12px rgb(5 15 26 / 0.45);
  --ds-shadow-card-hover: 0 12px 32px rgb(5 15 26 / 0.6);
  --ds-shadow-lift:       0 20px 40px -8px rgb(5 15 26 / 0.7);

  /* ================================================================== */
  /* MOTION — unchanged                                                  */
  /* ================================================================== */

  --ds-ease-out:        cubic-bezier(0.22, 1, 0.36, 1);
  --ds-dur-micro:       180ms;
  --ds-dur-hover:       300ms;
  --ds-dur-image:       500ms;
  --ds-dur-reveal:      700ms;
  --ds-reveal-stagger:  80ms;
  --ds-reveal-distance: 20px;
  --ds-hero-slide:      7s;
}