/*
 * Design tokens ported verbatim from Maui.PreventionApp/Resources/Styles/Colors.xaml.
 *
 * The MAUI app's look and content are already signed off by business stakeholders, so
 * these values are a transcription, not a redesign. Every hex below matches its XAML
 * counterpart exactly; the XAML key is given as the CSS variable name in kebab-case.
 * If a colour needs to change, change it in both places or the two clients will drift.
 */

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter.ttf') format('truetype');
    font-weight: 100 900;
    font-display: swap;
}

@font-face {
    font-family: 'Oxygen';
    src: url('../fonts/Oxygen-Regular.ttf') format('truetype');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Oxygen';
    src: url('../fonts/Oxygen-Light.ttf') format('truetype');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'Oxygen';
    src: url('../fonts/Oxygen-Bold.ttf') format('truetype');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'OpenSans';
    src: url('../fonts/OpenSans_Regular.ttf') format('truetype');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'OpenSans';
    src: url('../fonts/OpenSans_Semibold.ttf') format('truetype');
    font-weight: 600;
    font-display: swap;
}

:root {
    /* --- Core palette --- */
    --sg-primary: #2F303D;
    --sg-primary-dark: #1f202b;
    --sg-primary-dark-text: #2F303D;
    --sg-primary-light: #9DC6EB;
    --sg-primary-blue: #8BB7D8;
    --sg-primary-blue-dark: #6c94bd;
    --sg-primary-dark-gray: #7E8CA3;
    --sg-default-background: #E0F0F5;
    --sg-light-background: #F2F8F9;
    --sg-white-blue: #F5FCFF;
    --sg-default-light: #afd0d8;
    --sg-primary-disabled: #5279A0;
    --sg-primary-dimmed: #445B84;
    --sg-light-gray: #E0E0E0;
    --sg-bonus: #96CDCF;
    --sg-bonus-dimmed: #7BACB2;
    --sg-orange-primary: #e94e1b;
    --sg-red: #b5144d;
    --sg-yellow: #ffe359;
    --sg-green: #03554c;
    --sg-mint: #48B2A8;

    --sg-light-red: #ffe6ee;
    --sg-light-orange: #ffeee8;
    --sg-light-green: #ebffeb;

    --sg-secondary: #9DC6EB;
    --sg-secondary-dark-text: #8BB7D8;
    --sg-tertiary: #728FAE;

    --sg-white: #FFFFFF;
    --sg-black: #000000;
    --sg-magenta: #D600AA;
    --sg-midnight-blue: #190649;
    --sg-off-black: #1f1f1f;

    --sg-gray-100: #E1E1E1;
    --sg-gray-200: #C8C8C8;
    --sg-gray-300: #ACACAC;
    --sg-gray-400: #919191;
    --sg-gray-500: #6E6E6E;
    --sg-gray-600: #404040;
    --sg-gray-900: #212121;
    --sg-gray-950: #141414;

    /* --- Post-redesign palette (the "SG*" keys in Colors.xaml) --- */
    --sg-aqua-blue: #EAEFF4;
    --sg-blue: #1469C4;
    --sg-blue-shadow: #0056A4;
    --sg-gradient-dark-blue: #004583;
    --sg-dark-blue: #002B5B;
    --sg-darker-blue: #001A37;
    --sg-shadow-blue: #082A4E;
    --sg-surface: #F8FAFC;
    --sg-gray: #B8B8B8;
    --sg-gray-90: #E6E6E6;
    --sg-gray-90a: #E6E7E8;
    --sg-gray-primary-default: #C6C8CA;
    --sg-gray-bg: #D9D9D9;
    --sg-gray-darker: #717171;
    --sg-red-muted: #BD6C6C;
    --sg-text-error-default: #8A3939;
    --sg-green-strong: #017755;
    --sg-text-success-default: #015F44;
    --sg-blue-gray: #445B84;
    --sg-dark-gray: #3B3B3B;
    --sg-divider-primary: #C6C8CA;

    /* --- Typography ---
       MAUI FontSize values map 1:1 to CSS pixels so the proportions the stakeholders
       approved are preserved. Named after the Styles.xaml keys they come from. */
    --sg-font-body: 'Inter', 'Oxygen', system-ui, sans-serif;
    --sg-font-alt: 'Oxygen', 'Inter', system-ui, sans-serif;

    /*
     * The width the app is allowed to occupy. Every screen was laid out and signed off at
     * phone width, so a wider window must letterbox rather than stretch -- at 560px the
     * approved spacing and proportions are visibly pulled apart. 430px is the largest
     * common phone (iPhone Pro Max class), which is the widest this should ever render.
     *
     * This is also what makes an installed PWA open phone-shaped: there is no manifest key
     * for window size, so the only levers are display, orientation and this cap.
     */
    --sg-app-width: 430px;

    --sg-size-label-title: 28px;        /* LabelTitle */
    --sg-size-page-title: 16px;         /* PageTitle */
    --sg-size-label-header: 24px;       /* LabelHeader */
    --sg-size-flowing-text: 20px;       /* LabelFlowingText */
    --sg-size-flowing-18: 18px;         /* LabelFlowingText18 */
    --sg-size-flowing-16: 16px;         /* LabelFlowingText16, PageTitle, TextButton */
    --sg-size-form-label: 14px;         /* LabelSmallFormLabel */
    --sg-size-form-description: 13px;   /* LabelSmallFormDescriptionLabel */
    --sg-size-date-in-lists: 9px;       /* LabelDateInLists */

    --sg-line-height-flowing: 1.2;      /* LabelFlowingText LineHeight */

    /* --- Layout --- */
    --sg-page-padding: 10px;            /* PageParentGrid / PageParentStackLayout */
    --sg-radius-answer: 10px;           /* AnswerButton CornerRadius */
    --sg-radius-close: 5px;             /* CloseButton CornerRadius */
    --sg-tabbar-height: 56px;

    /* Safe areas, so the tab bar clears the iOS home indicator when installed. */
    --sg-safe-bottom: env(safe-area-inset-bottom, 0px);
    --sg-safe-top: env(safe-area-inset-top, 0px);
}