/**
 * AWSsome brand theme — the v2 design system, applied ONLY under
 * :root[data-brand="aws"] (set by layout.tsx when NEXT_PUBLIC_DOMAIN_ADAPTER=aws).
 *
 * It redefines the SAME design-system token names that /wt-design/colors_and_type.css
 * defines, so every component that already reads var(--primary-700), var(--fg),
 * var(--body-*) etc. re-skins with no component change. WeTransact's tokens are
 * on bare :root and are untouched — a WeTransact build never sets data-brand, so
 * this file is inert there and the Microsoft path cannot move.
 *
 * Values are the AWSsome v2 tokens (yellow #FFB700/#FFD71B, blue #0E82F9/#004285,
 * neutral ink #1A1A1A/#333). Type: Figtree for body/UI, Host Grotesk for
 * headings. The WT type tokens embed var(--font-sans), so overriding --font-sans
 * swaps the body font everywhere automatically; the heading/display tokens are
 * redefined to var(--font-display) for Host Grotesk.
 */

/* ── Fonts (v2 variable TTFs, self-hosted; CSP allows font-src 'self') ─────── */
@font-face {
  font-family: "Figtree";
  src: url("/awssome/fonts/Figtree-Variable.ttf") format("truetype-variations");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Host Grotesk";
  src: url("/awssome/fonts/HostGrotesk-Variable.ttf") format("truetype-variations");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

:root[data-brand="aws"] {
  /* ── Brand ramp: AWSsome dark/light blue replaces the WeTransact purple ──── */
  --primary-100: #EFF4FE;
  --primary-200: #E7EFFE;
  --primary-300: #C9D9FC;
  --primary-400: #7BB7F4;
  --primary-500: #0E82F9;
  --primary-600: #0A72DD;
  --primary-700: #0A72DD; /* dominant actions — AWSsome brand blue */
  --primary-800: #004285;
  --primary-900: #004285; /* deep ink blue */

  /* ── Neutrals: AWSsome ink ramp ─────────────────────────────────────────── */
  --neutral-100: #FFFFFF;
  --neutral-200: #F2F2F2;
  --neutral-300: #EEEEEE;
  --neutral-400: #E3E3E3;
  --neutral-500: #CCCCCC;
  --neutral-600: #AAAAAA;
  --neutral-700: #666666;
  --neutral-800: #444444;
  --neutral-900: #1A1A1A;
  --neutral-ink: #333333;

  /* ── Success = AWSsome green ─────────────────────────────────────────────── */
  --success-100: #D0FBE5;
  --success-200: #A5F5CF;
  --success-300: #6BEAB7;
  --success-400: #31D699;
  --success-500: #02AE70;
  --success-600: #02AE70;
  --success-700: #016B45;
  --success-800: #016B45;
  --success-900: #014E33;

  /* ── Warning = AWSsome yellow ────────────────────────────────────────────── */
  --warning-100: #FFF9C5;
  --warning-200: #FFF485;
  --warning-300: #FFE845;
  --warning-400: #FFD71B;
  --warning-500: #FFB700;
  --warning-600: #E5A400;
  --warning-700: #B07A00;
  --warning-800: #7A5300;
  --warning-900: #543900;

  /* ── Error = red (the one hue outside the brand ramps) ───────────────────── */
  --error-100: #FFEDEB;
  --error-200: #FFD9D4;
  --error-300: #F7C3BD;
  --error-400: #F09488;
  --error-500: #D91500;
  --error-600: #C21200;
  --error-700: #8F0F00;
  --error-800: #8F0F00;
  --error-900: #6B0B00;

  /* ── Surfaces / borders / text ───────────────────────────────────────────── */
  --bg:            #FFFFFF;
  --bg-subtle:     #EFF4FE;   /* signature app canvas → AWSsome periwinkle tint */
  --bg-muted:      #E7EFFE;
  --bg-inverse:    #1A1A1A;
  --surface:       #FFFFFF;
  --surface-raised: #FFFFFF;
  --surface-tint:  #E7EFFE;   /* active-nav, chips, badges */

  --border:        #E3E3E3;
  --border-strong: #AAAAAA;
  --divider:       #E3E3E3;

  --fg:            #1A1A1A;
  --fg-strong:     #1A1A1A;
  --fg-default:    #333333;   /* main body ink — AWSsome text is always ink */
  --fg-muted:      #666666;
  --fg-subtle:     #AAAAAA;
  --fg-disabled:   #CCCCCC;

  /* ── Accent = AWSsome light-blue action ──────────────────────────────────── */
  --accent:        #0E82F9;
  --accent-hover:  #0A72DD;
  --accent-pressed: #004285;
  --accent-subtle: #EFF4FE;
  --accent-fg:     #0A72DD;

  --success-fg:    #016B45;
  --success-bg:    #A5F5CF;
  --warning-fg:    #7A5300;
  --warning-bg:    #FFF485;
  --error-fg:      #8F0F00;
  --error-bg:      #FFD9D4;

  /* Links and email addresses are the one thing allowed AWSsome light blue. */
  --link:          #0E82F9;
  --focus-ring:    color-mix(in srgb, #0E82F9 40%, transparent);

  /* ── Type: Figtree body, Host Grotesk headings ───────────────────────────── */
  --font-sans: "Figtree", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Host Grotesk", "Figtree", ui-sans-serif, system-ui, sans-serif;

  /* Heading/display tokens redefined to Host Grotesk (they embed the family, so
     inline `font: var(--h1)` can only be re-fonted by redefining the token). */
  --display-2xl: 700 56px/64px var(--font-display);
  --display-xl:  700 44px/52px var(--font-display);
  --display-lg:  700 36px/44px var(--font-display);
  --h1: 700 28px/40px var(--font-display);
  --h2: 700 24px/40px var(--font-display);
  --h3: 700 20px/40px var(--font-display);
  --h4: 700 18px/24px var(--font-display);
  --h5: 700 16px/24px var(--font-display);
  --h6: 700 14px/20px var(--font-display);
}

/* ── AWSsome account view (web/app/customers/[slug]/AwsAccountView.tsx) ──────
   The design-system variables the account-view mock (docs/design, "Account View
   standalone-src.dc.html") references, resolved to the DS v2 token values, plus
   the brick hero band and the three type helpers. Scoped to the AWS brand and to
   the view's root so nothing else on the page is re-skinned. Values are the DS
   v2 tokens verbatim (colors.css / surfaces.css / radius-elevation.css). */
:root[data-brand="aws"] [data-aws-view] {
  --aw-grey-100: #EFF4FE;  --aw-grey-200: #E7EFFE;  --aw-grey-300: #C9D9FC;
  --aw-blue-200: #B5D9FD;  --aw-blue-500: #0E82F9;
  --aw-yellow-100: #FFF9C5; --aw-yellow-200: #FFF485; --aw-yellow-500: #FFB700;
  --aw-green-100: #D0FBE5;  --aw-green-200: #A5F5CF;  --aw-green-500: #02AE70;
  --aw-pink-300: #FF99CF;   --aw-red-500: #D91500;   --aw-red-100: #FFEDEB;
  --aw-dark: #333333;  --aw-dark-02: #222222;  --aw-dark-04: #666666;  --aw-dark-05: #AAAAAA;
  --aw-black: #1A1A1A;
  --aw-shape-blue: var(--aw-grey-300);  --aw-shape-yellow: var(--aw-yellow-200);
  --aw-surface-info: var(--aw-grey-100);  --aw-surface-soft: #F7F7F7;
  --aw-surface-warning: var(--aw-yellow-100);  --aw-surface-success: var(--aw-green-100);
  --aw-tone-blue-ink: #004285;  --aw-tone-green-ink: #016B45;  --aw-tone-yellow-ink: #7A5300;  --aw-tone-red-ink: #8F0F00;
  --aw-tone-pink-ink: #C43C74;  --aw-tone-yellow-ink-2: #A97C08;
  --aw-brand: #0A72DD;  --aw-info: var(--aw-blue-500);  --aw-success: var(--aw-green-500);  --aw-warning: var(--aw-yellow-500);  --aw-error: var(--aw-red-500);
  --aw-border-subtle: var(--aw-grey-300);  --aw-border-hairline: #E3E3E3;  --aw-track: #EEF1F6;  --aw-track-blue: #DCE4F0;
  --aw-gradient-ring: linear-gradient(120deg, #FF99CF 0%, #FF99CF 38%, #FFB700 62%, #FFD71B 100%);
  --aw-shadow-panel: 0px 12px 32px rgba(0, 66, 133, .08);
  --aw-shadow-cta-glow: 0px 6px 18px rgba(255, 153, 207, .35);
  --aw-shadow-subtle: 0px 4px 12px rgba(0, 66, 133, .06);
  --aw-font-heading: "Host Grotesk", "Figtree", system-ui, sans-serif;
  --aw-font-body: "Figtree", system-ui, sans-serif;
  /* Account View v3 (Alex, 2026-09-21): the extra DS tones the two-column mock
     references — light tinted backgrounds with their darker outlines, the grey
     and danger inks, and the pink call tone. Same DS v2 values. */
  --aw-tone-grey-ink: #555B66;
  --aw-danger-ink: #8F0F00;  --aw-warning-ink: #7A5300;
  --aw-surface-danger: #FFEDEB;
  --aw-bg-yellow-light: #FFFBE6;  --aw-bg-blue-light: #F3F7FE;  --aw-bg-pink-light: #FFEAF5;
  --aw-outline-blue: #B5D9FD;  --aw-outline-yellow: #FFE845;
}
/* Account View v3 body: two columns (journey / signals / activity / contacts on
   the left; AI action / commitments / timeline / notes on the right), and the
   Relationship + Commercial pair, both collapsing to one column when narrow. */
:root[data-brand="aws"] [data-aws-view] .aw-two-col { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr); gap: 16px; align-items: start; }
:root[data-brand="aws"] [data-aws-view] .aw-two-col > .aw-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
:root[data-brand="aws"] [data-aws-view] .aw-relcom { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; align-items: stretch; }
:root[data-brand="aws"] [data-aws-view] .aw-relcom > .aw-card { height: 100%; }
@media (max-width: 900px) {
  :root[data-brand="aws"] [data-aws-view] .aw-two-col { grid-template-columns: minmax(0, 1fr); }
}
:root[data-brand="aws"] [data-aws-view] a { color: var(--aw-info); text-decoration: none; }
:root[data-brand="aws"] [data-aws-view] a:hover { color: var(--aw-tone-blue-ink); }
:root[data-brand="aws"] [data-aws-view] .aw-hd { font-family: var(--aw-font-heading); letter-spacing: -0.02em; color: var(--aw-black); }
:root[data-brand="aws"] [data-aws-view] .aw-bd { font-family: var(--aw-font-body); }
:root[data-brand="aws"] [data-aws-view] .aw-eb { font-family: var(--aw-font-body); font-weight: 700; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--aw-dark-05); }
:root[data-brand="aws"] [data-aws-view] .aw-card { background: #fff; border: 1px solid var(--aw-border-subtle); border-radius: 24px; box-shadow: var(--aw-shadow-panel); }
/* Full-bleed brick wall: the hero band, exactly as the DS `.aw-brick`. */
:root[data-brand="aws"] [data-aws-view] .aw-brick { background-color: var(--aw-grey-200); background-image: url("/awssome/patterns/brick-header.png"); background-size: 1368px auto; background-repeat: repeat; }
/* Native <details> used as the expandable "Rest of the journey" / "Health detail"
   cards: hide the default marker so the summary reads as the mock's card. */
:root[data-brand="aws"] [data-aws-view] details > summary { list-style: none; }
:root[data-brand="aws"] [data-aws-view] details > summary::-webkit-details-marker { display: none; }
/* Below the two-column breakpoint the hero stacks. */
@media (max-width: 860px) {
  :root[data-brand="aws"] [data-aws-view] .aw-hero-grid { grid-template-columns: minmax(0, 1fr) !important; }
  :root[data-brand="aws"] [data-aws-view] .aw-act-grid { grid-template-columns: minmax(0, 1fr) !important; }
}