/* ==========================================================================
   Darya Rent — the design spec's tokens, and the bridge to the ones in use
   --------------------------------------------------------------------------
   daryarent-design-spec.html is now the source of truth for colour, shape and
   layout. Section 1 states the intent this file exists to deliver: white cards
   on a *cool* off-white page, deep navy as the brand ground, muted gold as the
   only accent, and navy-tinted shadows.

   The build had drifted warm — an ivory page (#FAF7F2), cream surfaces
   (#F2EDE4) and brass hairlines. Those are a different design, not a rougher
   version of this one, which is why the site read cream-and-brass beside a
   reference that reads white-and-navy.

   Two things happen here, in this order:

     1. the spec's tokens are declared verbatim, so any CSS taken from the spec
        can be pasted in and simply work;
     2. every --d-* token already used across darya*.css is re-pointed at them.

   Step 2 is what makes this safe. Every existing rule refers to --d-* and none
   of them has to change, so nothing built so far is lost or re-tested — the
   whole site adopts the spec palette from one file, and a mistake here is one
   file to revert rather than a hundred edits to unpick.

   Loaded last, because a custom property redeclared on :root is settled by
   source order.
   ========================================================================== */

:root {
    /* ---- 3 · colour tokens, verbatim from the spec ---- */
    --ink: #101B33;
    --ink-soft: #33465C;
    --muted: #5F6880;
    --line: #E2E7F0;
    --line-strong: #C2CBD9;

    --bg: #FFFFFF;
    --bg-alt: #F5F7FB;
    --bg-sunk: #EAEEF6;

    --brand: #0C1C3D;
    --brand-dark: #06122A;
    --brand-hover: #1B3E7C;
    --brand-tint: #EDF1F8;

    --gold: #BA8E4A;
    --gold-ink: #7E5A1D;
    --gold-tint: #F6EFE2;
    --accent: #7E5A1D;
    --accent-tint: #F6EFE2;

    --ok: #14603F;
    --ok-tint: #E5F4EC;
    --warn: #7A4E00;
    --warn-tint: #FCF3E0;
    --danger: #A3231C;
    --danger-tint: #FBEAE9;

    /* ---- 6 · shape & elevation ---- */
    --radius-lg: 20px;
    --radius: 14px;
    --radius-sm: 10px;
    --shadow-sm: 0 1px 2px rgba(12, 28, 61, .07), 0 2px 8px rgba(12, 28, 61, .05);
    --shadow: 0 2px 6px rgba(12, 28, 61, .06), 0 14px 34px rgba(12, 28, 61, .09);
    --shadow-lg: 0 8px 20px rgba(12, 28, 61, .10), 0 30px 60px rgba(12, 28, 61, .14);

    /* ---- 7 · layout ---- */
    --tap: 44px;
    --header-h: 68px;
    --bottomnav-h: 62px;
    --maxw: 1200px;
    --gap: 24px;

    /* ======================================================================
       The bridge. Left column is what the stylesheets already ask for; right
       column is what the spec says it should be.
       ====================================================================== */

    /* surfaces — the warm-to-cool correction, and the most visible change */
    --d-ivory: var(--bg-alt);      /* was #FAF7F2 ivory   → cool off-white page */
    --d-ivory-2: var(--bg-sunk);   /* was #F2EDE4 cream   → sunk cool surface   */
    --d-paper: var(--bg);          /* was #FFFDFA warm    → white cards          */
    --d-surface: var(--bg-sunk);
    --d-press: var(--brand-tint);
    --d-white: var(--bg);

    /* text */
    --d-ink: var(--ink);           /* was #131A28 */
    --d-muted: var(--muted);       /* was #4A5568 */

    /* rules and edges: structure is a cool line, not brass. Section 2 —
       "navy is interaction, gold is prestige" — so gold stops being the
       hairline and is spent only where the spec spends it. */
    --d-line: var(--line);
    --d-edge: var(--line-strong);
    --d-hair: var(--line);
    --d-hair-soft: var(--line);

    /* brand */
    --d-navy: var(--brand);
    --d-navy-light: var(--brand-hover);
    --d-navy-deep: var(--brand-dark);
    --d-gold: var(--gold);
    --d-gold-ink: var(--gold-ink);  /* was #8A6224 */
    --d-gold-soft: var(--gold-tint);

    /* semantic */
    --d-ok: var(--ok);              /* was #12805A */
    --d-success: var(--ok);
    --d-warning: var(--warn);       /* was #9A5F09 */
    --d-bad: var(--danger);         /* was #B3261E */
    --d-danger: var(--danger);

    /* shape */
    --d-radius: var(--radius);
    --d-radius-sm: var(--radius-sm); /* was 12px → 10px */
    --d-tap: var(--tap);
}

/* --------------------------------------------------------------------------
   Gold is prestige, and the spec spends it in named places. The drawer's
   "list your car" call to action is the one CTA section 2 allows it on, so it
   keeps its gold edge now that --d-hair has become a cool line.
   -------------------------------------------------------------------------- */
.d-drawer-cta {
    border-color: rgba(186, 142, 74, .38);
}